什么是 reselect？
reselect 是一个用于 Redux 应用程序的选择器库。它可以帮助我们优化 Redux 应用程序性能，避免不必要的计算和重新渲染。
当 Redux store 中的状态发生改变时，所有与之相关的组件都会重新计算并重新渲染。如果你有一些非常耗时的计算或昂贵的数据处理，这个过程可能会导致应用程序性能下降。 通过使用 reselect，可以缓存计算结果，从而避免不必要的计算和重新渲染。
安装和使用 reselect
安装 reselect 很简单，只需要在命令行中运行以下命令：
--- ------- --------
然后，在你的 Redux 应用程序中引入 createSelector 方法：
------ - -------------- - ---- -----------
如何使用 reselect
使用 reselect 的第一步是定义一个选择器函数。选择器函数接收 state 参数和其他参数，然后返回基于这些参数计算出来的数据。
----- -------- - ----- -- ------------
----- ------------------- - ----- -- -----------------------
------ ----- --------------- - ---------------
---------- ---------------------
------- ----------------- -- -
------ ------------------ -
---- -----------
------ ------
---- -----------------
------ ----------------- -- ----------------
---- --------------
------ ----------------- -- -----------------
--------
----- --- -------------- ------- - - ------------------
-
-
--在上面的例子中，我们定义了一个选择器函数 getVisibleTodos，它接收两个参数：todos 和 visibilityFilter。使用 createSelector 方法来创建一个 memoized 选择器，该选择器计算 todos 和 visibilityFilter 参数，并返回基于这些数据计算出来的可见 todo 列表。
当 Redux store 中的状态发生变化时，getVisibleTodos 会自动重新计算，并且只有在 todos 或 visibilityFilter 发生变化时才会重新计算。这可以提高应用程序性能。
使用 reselect 的好处不限于此，下面是一些其他的好处：
- reselect 可以帮助你避免重复计算，因为选择器具有记忆功能。
- reselect 可以使测试更容易，因为选择器是纯函数，只依赖于输入参数。
- reselect 兼容与 React 和非 React 应用程序。
总结
reselect 是一个非常有用的 npm 包，它可以帮助我们优化 Redux 应用程序的性能。通过创建选择器函数，我们可以缓存计算结果，从而避免不必要的计算和重新渲染。这样可以提高应用程序的性能，并减少开发人员所需的工作量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32486