在前端开发中，我们经常会遇到需要对多层数据进行筛选的情况。如果使用原生的 Redux，我们可能需要写一些冗长的代码来处理这些数据。但是，使用 reselect 库可以大大简化我们的代码，提高代码的可读性和性能。
什么是 reselect？
reselect 是一个用于创建可记忆的、高效的、可组合的选择器函数的库。它可以帮助我们在 Redux 中优化多层数据的筛选，避免不必要的计算，提高性能。
如何使用 reselect？
使用 reselect 需要遵循以下步骤：
- 安装 reselect 库
npm install reselect
- 创建选择器函数
选择器函数是一个函数，它接收一个或多个参数，并返回一个值。它可以用来从 Redux store 中选择和计算数据。reselect 提供了一个 createSelector 函数，可以用来创建选择器函数。
例如，我们有一个包含用户信息和订单信息的 state：
-- -------------------- ---- -------
----- ----- - -
------ -
-- - --- -- ----- ------- --
-- - --- -- ----- ----- -
--
------- -
-- - --- -- ------- -- ------ --- --
-- - --- -- ------- -- ------ --- --
-- - --- -- ------- -- ------ --- -
-
-我们想要创建一个选择器函数，用来计算某个用户的订单总额。我们可以这样写：
-- -------------------- ---- -------
------ - -------------- - ---- ----------
----- ------------- - ------- ------- -- ------------------------- -- ------------ --- -------
----- ------------ - ---------------
----------------
-------- -- -
------ --------------------- ------ -- ----- - ------------ --
-
-这个选择器函数接收一个 userId 参数，返回该用户的订单总额。它先调用 getUserOrders 函数筛选出该用户的订单，然后通过 reduce 函数计算订单总额。
- 使用选择器函数
我们可以在组件中使用选择器函数来获取数据。reselect 会自动缓存计算结果，如果数据没有变化，就不会重新计算。
例如，我们可以在组件中这样使用 getUserTotal 函数：
-- -------------------- ---- -------
------ - ----------- - ---- -------------
----- ---------- - -- ------ -- -- -
----- ----- - ----------------- -- ------------------- --------
------ -
-----
----- -------- ------ -----------
------
-
-reselect 的优点
使用 reselect 有以下几个优点：
可记忆的：reselect 会缓存计算结果，避免重复计算，提高性能。
高效的：reselect 可以避免不必要的计算，只在需要时才重新计算。
可组合的：reselect 的选择器函数可以组合使用，形成更复杂的选择器函数。
示例代码
以下是一个完整的使用 reselect 的示例代码：
-- -------------------- ---- -------
------ - -------------- - ---- ----------
------ - ----------- - ---- -------------
----- ----- - -
------ -
-- - --- -- ----- ------- --
-- - --- -- ----- ----- -
--
------- -
-- - --- -- ------- -- ------ --- --
-- - --- -- ------- -- ------ --- --
-- - --- -- ------- -- ------ --- -
-
-
----- ------------- - ------- ------- -- ------------------------- -- ------------ --- -------
----- ------------ - ---------------
----------------
-------- -- -
------ --------------------- ------ -- ----- - ------------ --
-
-
----- ---------- - -- ------ -- -- -
----- ----- - ----------------- -- ------------------- --------
------ -
-----
----- -------- ------ -----------
------
-
-总结
使用 reselect 可以大大简化我们的代码，提高代码的可读性和性能。它是一个非常实用的工具，建议在 Redux 开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c72a84add4f0e0ff14bdda