在前端应用中，性能一直是一个关键问题。Redux 是一个十分流行的状态管理库，然而随着应用复杂度的增加，这意味着 Redux 中的 state 树也变得越来越大，这又为我们带来了一个新的问题：当我们从 Redux 中获取 state 的时候，如何可以使组件的渲染更快，以提高整个应用的性能？
Reselect 就是为解决这个问题而生的。Reselect 是一个简单的库，它可以帮助开发者缓存 state 中的数据，以避免数据的重复计算，并且只在必要的时候更新数据。 这篇文章将向您展示如何使用 Reselect 来加速 Redux 应用，并且提高整个应用的性能。
什么是 Reselect
Reselect 是一个简单的库，可以帮助开发者缓存 state 中的数据，以避免数据的重复计算，并且只在必要的时候更新数据。
Reselect 的核心概念是 Selector，Selector 是一个接收 state 作为参数的纯 JavaScript 函数。每当 state 中的数据发生改变，Selector 都会被调用。Selector 的主要作用是将 state 中的数据进行转换、筛选、合并等操作，使组件只更新必要的部分。Reselect 是 Redux 官方推荐使用的缓存库。
如何使用 Reselect
Reselect 很容易使用，只需要定义你的 Selector，然后将它传递给 connect 函数，就可以将其添加到 Redux 中。在您的组件中，您现在可以使用 Reselect 的值来获取您想要的数据，而不必在每次渲染时都重新计算数据。
以下是一个使用 Reselect 的简单示例：
import { createSelector } from 'reselect'
const getTodos = state => state.todos
const getCompletedTodos = createSelector(
getTodos,
todos => todos.filter(todo => todo.completed === true)
)在这个示例中，我们定义了两个 Selector。第一个 Selector getTodos 负责从 state 中获取 todos。第二个 Selector getCompletedTodos 则使用第一个 Selector，并且筛选出 completed 为 true 的 todos。 Reselect 会自动地缓存 getTodos 的结果，并且只在 getTodos 返回的值发生变化时才会调用它。这可以提高应用的性能。
为了将 Selector 添加到您的 Redux 中，您需要使用 createSelector 函数并将它传递给 connect 函数。
const mapStateToProps = state => {
return {
completedTodos: getCompletedTodos(state)
}
}
export default connect(mapStateToProps)(MyComponent)这样，当 MyComponent 被渲染时，它将从 Redux 获取完成的 todos。由于 getCompletedTodos 是一个 Selector， Redux 只会在 getTodos 的返回值发生变化时才重新计算。
Reselect 的用例
Reselect 可以用于许多不同的场景，在这个例子中，我们将演示如何使用 Reselect 来加速 TodoList 应用。首先，让我们创建一个简单的 TodoList 组件。
-- -------------------- ---- -------
------ ----- ---- -------
----- -------- - -- ----- -- -- -
-----
--------------- -- -
---- -------------------------------
---
------
-
------ ------- --------这个组件接受一个 todos 数组作为 prop，并且将其映射到一个列表上。现在，让我们定义一个新的 Selector，用于筛选和排序 todos，以便更好地显示它们。
-- -------------------- ---- ------- ------ - -------------- - ---- ---------- ----- -------- - ----- -- ----------- ----- ----------------- - --------------- --------- ----- -- ----------------- -- -------------- --- ----- - ----- -------------- - --------------- ------------------ ----- -- -------------- -- -- ----------- - ------------ -
在此例中，我们首先筛选出已完成的 todos，然后按照它们的createdAt 属性进行排序。这意味着当我们在组件中调用 getSortedTodos 时，Reselect 会检查 getCompletedTodos 的返回值是否发生变化。如果没有变化，它将返回旧值，避免了额外的计算。
现在，我们可以使用 getSortedTodos Selector 来获取我们想要的 todos，并将它传递给我们的组件。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - -------------- - ---- -------------
----- -------- - -- ----- -- -- -
-----
--------------- -- -
---- -------------------------------
---
------
-
----- --------------- - ----- -- -
------ -
------ ---------------------
-
-
------ ------- ----------------------------------以上示例展示了如何使用 Reselect 实现性能优化。通过缓存 state 的数据， Reselect 可以避免重复计算，减少我们组件的渲染次数，从而提升页面速度。
总结
在性能是一个问题的前端应用中， Reselect 提供了一种简单、易用的数据缓存方案，可以帮助我们避免重复计算相同的数据，优化应用性能。使用 Reselect 可以使我们的组件从大量计算中解放出来，使整个应用程序更加高效。
如果您还没有尝试过 Reselect，请务必在您的 Redux 应用程序中使用它。 您将惊喜地发现， Reselect 对于优化应用的性能有着非常大的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496b42e48841e98943f06a6