在前端开发中，我们通常使用 Redux 来管理应用程序的状态。Redux 提供了一种可预测的状态管理方案，这使得我们的代码更易于维护和测试。然而，随着应用程序变得越来越复杂，我们可能会遇到一些性能问题，这就是 where Reselect comes in。Reselect 是一个可重用的 Javascript 库，它提供了一个非常简单的 API 来缓存和计算 Redux store 中的数据。本文将向您介绍如何在Redux 中使用 Reselect 来提高性能。
理解 Reselect
在介绍如何使用 Reselect 前，让我们快速了解一下 Reselect。Reselect 是一个用于缓存 Redux store 中计算的选择器库。选择器是指一种计算派生值的函数，类似于计算属性。这些函数可以接收一个或多个参数，并返回一个派生值。如果相同的参数传递给选择器，则由选择器返回的值将被缓存并从缓存中检索，因此避免了所有计算。这种缓存机制使选择器很有效，尤其是在处理大型和复杂的 Redux 状态树时。
安装和使用 Reselect
Reselect 可以通过 npm 安装。要使用它，在你的项目目录中运行以下命令：
npm install reselect
安装完成后，我们需要使用 Reselect 的 createSelector 函数来创建我们自己的选择器。通过 createSelector 函数，我们可以缓存计算结果。为了使用 createSelector 函数，请导入它并调用。以下是使用 createSelector 函数的示例：
-- -------------------- ---- ------- ------ - -------------- - ---- ----------- ----- --------- - ------- -- ----------------- ----- ---------- - ------- -- ---------------------- ----- -------- - ------- -- - ----- ----- - ----------------- ------ ------------------ ----- -- --- - ----------- --- -- ----- --- - --------------- --------- ----------- ---------- ----------- -- -------- - ----------- - ---- -- ------ ----- ----- - --------------- --------- ---- ---------- ---- -- -- ------ -------- - --- -- --
在上面的代码中，我们首先定义了一些选择器函数来提取 Redux store 中的数据。然后我们用这些函数来创建 subtotal 和税选择器。最后，我们将 subtotal 和税选择器用于创建最终的 total 选择器。当调用 total 选择器时，它将缓存 subtotal 和税值的结果并返回它们的和。
在 Redux 中使用 Reselect
为了使用 Reselect 在 Redux 中提高性能，我们需要将 Reselect 的选择器与 Redux 的 connect 函数结合使用。通过这种方式，我们可以将每个选择器映射到组件的 props 属性中，并且只有在对应的数据改变时重新计算。
以下是一个为了在 Redux 中使用 Reselect 做出的修改示例：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
------ - ------- - ---- --------------
----- --------------- - ----- -- -
----- ----------- - ---------------
----- -- ------------
----- -- ----------------- -- ------------
--
------ -
------------ ------------------
--
--
------ ------- --------
---------------
---------------在此示例中，我们使用 mapStateToProps 函数来创建 selectUsers 选择器，选择器负责从 Redux state 中选择 activeUsers。我们将 selectUsers 映射到 MyComponent 组件的 props 属性中，只有当 selectUsers 的计算结果更改时，MyComponent 才会重新渲染。
总结
Reselect 是一个实用的库，它可以显著提高 React 应用程序的性能。通过使用 Reselect 缓存计算结果，我们可以避免不必要的重新计算，并大大减少组件渲染次数。在 Redux 应用程序中使用 Reselect 也非常简单，我们只需要使用 createSelector 函数即可。如果您在开发应用程序时遇到性能问题，请考虑使用 Reselect 来解决它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644fc627980a9b385b9144ea