Redux-selector 是一个非常有用的工具，它可以帮助我们从 Redux store 中选择数据并计算出我们需要的值。然而，在多个组件中使用 Redux-selector 时，我们可能会遇到一个问题：重复计算。
当多个组件使用相同的 Redux-selector 时，每个组件都会独立计算一遍这个 selector，这会导致不必要的性能消耗。为了解决这个问题，我们需要将计算结果缓存起来并在需要时复用它们。
解决方案
我们可以使用 Reselect 库来解决这个问题。Reselect 是一个 Redux-selector 库，它提供了一个叫做 createSelector 的函数，可以帮助我们创建可缓存的 selector。
在使用 Reselect 之前，我们需要先了解一下 Redux-selector 的基本用法。下面是一个简单的 Redux-selector 示例：
const getTodos = state => state.todos; const getCompletedTodos = createSelector( [getTodos], todos => todos.filter(todo => todo.completed) );
在这个示例中，我们定义了两个 Redux-selector：getTodos 和 getCompletedTodos。getCompletedTodos 依赖于 getTodos，它会将 getTodos 返回的 todos 数组中的已完成任务过滤出来。
现在，我们可以使用 Reselect 来创建一个可缓存的 getCompletedTodos selector：
const getCompletedTodos = createSelector( [getTodos], todos => todos.filter(todo => todo.completed) );
这个 getCompletedTodos selector 现在是可缓存的了。当多个组件都需要使用 getCompletedTodos 时，它们会共享同一个计算结果，从而避免了重复计算。
示例代码
下面是一个完整的示例代码，它演示了如何使用 Reselect 创建可缓存的 Redux-selector：
-- -------------------- ---- ------- ------ - -------------- - ---- ----------- ----- -------- - ----- -- ------------ ----- ----------------- - --------------- ----------- ----- -- ----------------- -- --------------- -- ----- ------------------ - --------------- ----------- ----- -- ----------------- -- ---------------- -- ----- --------------- - ----- -- -- --------------- ------------------------- ---------------- ------------------------- --- ------ ------- -----------------------------------
在这个示例代码中，我们定义了两个可缓存的 selector：getCompletedTodos 和 getIncompleteTodos。它们都依赖于 getTodos，它负责从 Redux store 中获取 todos 数据。
在 mapStateToProps 函数中，我们使用这两个 selector 来计算 completedTodos 和 incompleteTodos。这两个计算结果都是可缓存的，它们会被多个组件共享。
总结
使用 Reselect 可以帮助我们解决 Redux-selector 在多个组件中重复计算的问题。通过将计算结果缓存起来，我们可以避免不必要的性能消耗，让我们的代码更加优雅。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662c771cd3423812e49fe347