什么是 reselectie?
reselectie 是一个可以帮助你管理输入的数据集合，提高性能的 JavaScript 库。他的特点是可以避免不必要的计算和渲染，提高了性能。
为什么使用 reselectie?
在复杂的前端应用中，拆分 state 是必要的。然而，当状态有多个来源和依赖关系时，可能会变得更加复杂且难以理解。这时，reselectie 可以优化性能，同时提高代码的可读性和可维护性。
例如，在 Redux 中，每次组件重新渲染时，都会计算状态的衍生状态。当依赖于多个状态的衍生状态变得更加复杂时，计算时间也就越长。reselectie 通过缓存衍生状态，仅在必要时执行计算，并使计算结果得以复用。
reselectie 的使用方法
安装 reselectie
你可以通过 npm 安装 reselectie：
npm install reselect
创建选择器（Selectors）
在 reselectie 中，选择器是一个函数，它从 state 中提取和转换数据。如果输入数据的值没有发生变化，则选择器将直接返回缓存的结果，而不会计算函数的输出。这意味着即使您多次调用选择器，也不会多次计算结果。
例如，让我们创建一个获取用户信息的选择器：
import { createSelector } from 'reselect';
const getUser = state => state.user;
export const getUserDisplayName = createSelector(
getUser,
user => `${user.firstName} ${user.lastName}`
);在上述代码示例中，getUserDisplayName 接收状态 state 作为输入，然后返回组合后的字符串。该函数通过 createSelector 工厂函数创建，并具有两个参数：
- 作为输入的状态选择器
- 一个需要计算的函数，这个函数处理状态并生成所需输出
使用选择器
现在我们已经创建了一个选择器，下面将使用它来获取用户的展示名：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ - ------------------ - ---- -------------- ----- --------------- - -- ----------- -- -- ------------------------- ----- --------------- - ----- -- -- ------------ -------------------------- --- ------ ------- ------------------------------------------
在上面的例子中，我们使用 connect 函数将 UserDisplayName 组件连接到 Redux store。然后我们可以将展示名作为 displayName 属性传递到组件中。
Reselect 中的高阶选择器
reselect 还支持使用多个选择器生成结果的联合选择器。这通常称为 “高阶选择器”。
例如，我们可以创建一个高阶选择器来获取用户的展示名和年龄：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
----- ------ - ----- -- ---------------
----- ------------------------ - ---------------
--------
-------
------ ---- -- --
------------ ------------------ ------------------
----
--
--
------ ------- -------------------------在上述代码示例中，getUserDisplayNameAndAge 接收两个状态选择器（ getUser 和 getAge ）和一个函数。该函数处理输入并返回一个包含用户展示名和年龄的对象。
然后我们可以使用 getUserDisplayNameAndAge 来获取这两个属性：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ ------------------------ ---- --------------
----- ----------- - -- ------------ --- -- -- -
--
------------------------
----------------
---
--
----- --------------- - ----- -- --
-----------------------------------
---
------ ------- --------------------------------------总结
在使用 reselectie 时，我们需要：
- 创建一个或多个选择器。
- 使用选择器从状态中提取数据，并使用输出作为组件的属性。
- 在处理复杂的衍生状态时，使用联合选择器以避免多次执行重复数据。
结合 Redux 的使用，reselectie 可以帮助我们更轻松地管理输入数据，并提高前端应用的性能。我们建议您深入学习本文库，并在您的做法中尝试使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560de81e8991b448df218