在前端开发中，我们经常会使用 Redux 进行状态管理。虽然 Redux 功能非常强大，但是在处理大量数据时，Redux 的性能可能会受到影响。这时候使用 reselect 库可以优化性能，提高代码的可读性和可维护性。
什么是 reselect？
Reselect 是一个专门为 Redux 应用程序提供的用于选择（选择器）数据的库。它能保留一些计算结果并在需要的时候缓存这些结果，从而避免了不必要的重复计算。
它的主要作用是将 Redux 的 state 映射到组件需要的数据结构，它通过 memoize 缓存，减少了渲染时的计算量，优化了性能。
为什么使用 reselect？
在 Redux 应用中，计算某个 state 的值是非常常见的操作。这个计算可能会使用到 state 中的其他值，也可能会耗费大量的时间。如果我们每次都执行这个计算，它将被反复执行，无论这个计算的结果是否改变。这样它将浪费大量的时间和 CPU 资源。
我们可以使用 Redux 的 createSelector 函数与 Reselect 库来避免这个问题。createSelector 函数接受算法函数和结果转换函数。这意味着 createSelector 将结果缓存起来，只有在输入的参数发生更改的情况下才会重新生成结果。
使用 reselect 的示例
接下来，我们将使用 reselect 优化一段计算 state 的代码。
-- -------------------- ---- -------
------ - -------------- - ---- ----------
----- ----------- - ------- -- --------------
----- -------------------- - ---------------
--------------
---------- -- ---------------------- -- ---------------
-
----- -------------------------- - ---------------
-----------------------
------------------- -- ------------------------
-
-- ---------
----- --------------- - ------- -- -
------ -
------------------ ----------------------------
------------------------ ---------------------------------
-
-在上面的代码中，我们定义了三个 selector，一个是获取 todoList，一个是获取完成的 todoList，一个是获取完成的 todo 的数量。其中，getTodoList 是一个普通的函数，而 getCompletedTodoList 和 getTotalCompletedTodoCount 使用了 createSelector。
在 getCompletedTodoList 中，我们使用了 todoList.filter 方法筛选出所有已经完成的任务。在 getTotalCompletedTodoCount 中，我们使用了 getCompletedTodoList 函数的返回值，计算已经完成的任务数量。
我们可以看到，在 mapStateToProps 函数中使用了这两个 selector 的返回值，而不是计算结果。当 state 中的 todoList 发生变化时，getCompletedTodoList 和 getTotalCompletedTodoCount 都会重新计算，但是如果只有未完成任务的值发生变化时，getCompletedTodoList 不会重新计算 getTotalCompletedTodoCount。
如果没有使用 createSelector，每次任何一个 state 的值发生变化时，都会重新计算 getCompletedTodoList 和 getTotalCompletedTodoCount.
总结
在 Redux 应用程序中使用 Reselect 可以提高性能，避免不必要的重复计算，增加代码的可读性和可维护性。在实际应用中，使用 Reselect 库优化代码将是非常有用的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648dd8c848841e9894c37aff