在前端开发中，数据的处理和存储是非常重要的，而 Redux 作为一款流行的状态管理库，可以帮助我们进行数据管理。但是，在处理大量数据或者数据嵌套的情况下，Redux 的效率可能会受到影响。为此，Redux 为我们提供了一个 reselect 的工具来优化数据处理和缓存，从而提高应用程序的性能。
Reselect 的作用
在 Redux 中，我们通常会使用 mapStateToProps 函数将 state 映射到组件的 props 中，以便我们可以使用 state 中的数据来渲染组件。但是，使用 mapStateToProps 有时候会存在数据的不必要计算，即使 state 中的数据没有发生改变，mapStateToProps 仍然会对数据进行重新计算。比如说，我们有一个组件需要根据用户筛选条件筛选出数据，那么每次组件渲染时，都会重新计算筛选出的数据，这会影响性能。
Reselect 的作用就是在计算函数的输出结果发生改变之前，从缓存中检索先前的输出结果，如果输入未更改，则计算函数将不会运行，并且可以立即返回先前缓存的值。这样，就可以大大减少对数据的计算，从而提高性能。
Reselect 的使用
首先，我们需要安装 reselect：
npm install reselect --save
然后，我们需要修改我们的 mapStateToProps 函数。通常，我们的 mapStateToProps 函数是这样写的：
-- -------------------- ---- ------- ----- --------------- - ------- -- -- ----- ----------- ------- ------------- ----------- -------------------- -------------- --- ----- -------- - ------ ------- -- - -- --------- --
在这种情况下，每当 state 更改时，sortData 函数都会运行。为了避免这种情况，我们可以使用 Reselect，将 sortData 函数封装成一个 selector，并在 mapStateToProps 函数中使用 selector：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
----- --------- - ----- -- -------------
----- ------- - ----- -- -----------
----- ---------------- - ---------------
----------- ---------
-------- ----- -- -
------ -------------- --------
-
--
----- --------------- - ------- -- --
----- -----------
------- -------------
----------- ------------------------
---
----- -------- - ------ ------- -- -
-- ---------
--在这里，我们定义了两个输入选择器，getFilter 和 getData，它们分别为 filter 和 data 创建了一个 selector，sortDataSelector。sortDataSelector 将 filter 和 data 作为输入，并对它们进行计算，然后返回筛选后的数据。selector 会缓存它们的输出结果，以确保只有当输入更改时才重新计算。
那么，如何处理我们的数据缓存呢？使用 Reselect 很容易，可以通过创建一个简单的 selector，将所有数据存入缓存，在后续中使用该 selector 来计算数据。例如：
-- -------------------- ---- -------
----- ----------------- - ---------------
-------------------
------ -- -
----- --------- - ---
------------------- -- -
------------------ - -----
---
------ ----------
-
--这样，我们就可以在其他 selector 中使用我们的缓存数据。
总结
Redux 的 Reselect 可以帮助我们优化数据处理和缓存，并提高应用程序的性能。使用 Reselect 可以更好地管理我们的数据，并避免运行不必要的代码，从而提高效率。虽然 Reselect 的使用有些复杂，但仍然值得学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a8dee248841e9894539ff4