随着前端应用的复杂度增加，我们在使用 Redux 管理状态时往往会遇到性能瓶颈问题。这个时候，Reselect 这个库就成了我们的一把利器，可以有效地解决这个问题。
Reselect 是什么？
Reselect 是一个简单的选择器库，允许我们将 Redux 的 state 映射到我们需要的形式。使用 Reselect，可以创建一个 memoized selector 函数，来计算派生状态，并且只有在需要时才重新计算。
为什么需要 Reselect？
在 Redux 中，使用 mapStateToProps 将 state 映射到组件的 props。但是，当 state 发生变化时，每一个与这个 state 相关的组件都会重新渲染。如果我们的 state 很庞大，那么这个过程将会非常消耗性能。
Reselect 解决这个问题的方法十分简单：在计算派生状态时，Reselect 会检查入参是否有改变。如果没有改变，将直接返回缓存的结果。这样，当 state 发生变化时，只会重新计算这个派生状态，而不会重新计算整个 state 映射的所有 props，从而提高了应用的性能。
如何使用 Reselect？
首先，我们需要安装 Reselect：
--- ------- --------
接着，我们需要创建一个选择器函数，来计算派生状态：
------ - -------------- - ---- -----------
----- -------- - ----- -- ------------
----- ---------- - ----- -- --------------
----- ------------- - ---------------
---------- ------------
------- -------- -- -
------ ----------------- -- ---------------------------------
-
--在上面的例子中，我们创建了一个 filteredUsers 的选择器函数，该函数接收两个参数：getUsers 和 getFilters。当 getUsers 和 getFilters 改变时，filteredUsers 会重新计算。
接下来，我们就可以在 mapStateToProps 中使用这个选择器函数了：
----- --------------- - ----- -- -- ------ --------------------- ---
当 state 中的 users 或 filters 发生变化时，会调用 filteredUsers 来获取我们需要的数据，而不是重新计算整个 props。
总结
Redux 是一个非常流行的状态管理库，但在处理大量数据时，我们需要使用 Reselect 这样的库来解决性能问题。使用 Reselect 的关键是理解 memoized selector 的概念，将耗时操作放到计算属性中，并使用 createSelector 创建 memoized selector 函数。详细的代码示例和使用方法可以参考 Reselect 的官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646d5a5d968c7c53b0c0c1e4