什么是 Reselect？
Reselect 是由开发团队在 Redux 上开发的一个库，它提供了一种灵活的方式来创建可记忆选择器（Memoized Selectors）。这些选择器可以筛选 Redux store 中的部分 state 并返回一个派生数据，而不必进行多余计算。
Reselect 可以帮助我们避免不必要的组件重新渲染，提高 React 应用的渲染性能，同时也能简化我们的代码逻辑。
如何使用 Reselect？
Reselect 导出了一个名为 createSelector 的函数，我们可以使用它来创建可记忆选择器。
首先，我们需要定义一个名为select的函数，它从 Redux 存储中获取所有的 state：
----- ------ - ----- -- ------
接下来，我们可以使用 createSelector 函数来创建可记忆选择器。如下所示，我们创建了一个名为selectData的选择器，它会从select函数返回的 state 中提取我们需要的数据并返回它们。
------ - -------------- - ---- ----------- ----- ---------- - --------------- ------- ----- -- ---------- --
现在，我们可以像这样在组件中使用我们的 selectData 选择器：
------ - ----------- - ---- -------------- -------- ------------- - ----- ---- - ------------------------ -- --- -
为什么要使用 Reselect？
使用 Reselect 可以提高 React 应用的性能，因为它允许我们避免不必要的组件重新渲染。
在 Redux 应用中，当任何 state 改变时，所有与之相关的组件都会重新渲染。这可能会导致一些性能问题，尤其是当我们的 state 非常大或者我们的组件嵌套层次很深时。
Reselect 可以帮助我们缓存与所选 state 相关的值，当 state 的值发生变化时，我们可以避免重新计算这些值。这样，我们就可以避免不必要的重新渲染，并提高应用的性能。
示例代码
下面是一个示例代码，说明如何使用 Reselect 来避免不必要的组件重新渲染。
假设我们有一个 Redux store，它包含一个列表的数据：
----- ----- - -
----- -
- --- -- ----- ------ --
- --- -- ----- ------ --
- --- -- ----- ----- --
- --- -- ----- ------- --
--
--我们希望从列表中筛选出所有的名字，不过我们只想在列表发生变化时重新计算这些名字。
下面是我们如何使用 Reselect 来创建可记忆选择器：
------ - -------------- - ---- ----------- -- ----- ----- ----- ------ - ----- -- ------ -- - ----- ----- ----- ---------- - --------------- ------- ----- -- ---------- -- -- ------- ----- ----------- - --------------- ----------- ---- -- ------------- -- ---------- --
现在，我们可以在组件中使用 selectNames 选择器，如下所示：
------ - ----------- - ---- -------------- -------- ------------- - ----- ----- - ------------------------- -- --- -
在这个例子中，当列表的状态发生变化时，我们只会重新计算名字一次。这有助于避免不必要的重新渲染，并提高应用程序的整体性能。
总结
Reselect 是一个非常有用的库，它可以帮助我们避免不必要的组件重新渲染，并提高 React 应用的性能。
通过创建可记忆的选择器，我们可以缓存与所选 state 相关的数据，并在需要时重新计算它们。这样，我们就可以避免不必要的重新渲染，并提高应用的整体性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653cdd477d4982a6eb6d2fa3