在 React 应用中，我们通常使用 Redux 管理数据流，并在 Next.js 中借助 next-redux-wrapper 实现服务端渲染。但是，当数据状态较为复杂时，我们可能会出现不必要的重复计算，导致性能瓶颈。reselect 就是专门为这种情况开发的库，它可以缓存在 Redux store 中计算的数据，以优化应用性能。
什么是 reselect
reselect 是一个用于创建可记忆的、高效的 memoized 选择器的库。它可以根据参数，缓存并返回预计算结果，以便在下一次调用时有效地实现数据的重用。
使用 reselect 可以将选择器与 Redux 应用程序的 store 集成起来，以提供优化应用程序性能所需的所有信息。
reselect 的 API 很简单，只有两个主要的函数：
createSelector: 创建一个可记忆的选择器函数。
createStructuredSelector: 将一个对象映射到一个创建的选择器函数，用于便捷地组织多个选择器。
如何使用 reselect
在 Next.js 中使用 reselect 需要两个步骤：创建选择器和将选择器与 store 相关联。
创建选择器
创建选择器是使用 reselect 的第一步。选择器实际上只是一个函数，它从 Redux store 中获取数据，并根据该数据对其进行转换和筛选。下面是一个例子：
-- -------------------- ---- -------
------ - -------------- - ---- ----------
----- ------------- - ----- -- -----------
----- -------------- - ----- -- ------------
------ ----- ------------------ - ---------------
--------------- ----------------
------- ------- -- -
-- -----------
------ ----------------- -- -------------------------------------------------------
-
-在上面的例子中，我们定义了两个选择器函数 usersSelector 和 filterSelector。由于 createSelector 接受一个数组作为第一个参数，它将这些选择器用于创建一个带有 users 和 filter 作为参数的函数。返回的函数可以缓存上一次的结果，在下一次调用时有效地重用计算结果。
此时，我们已经成功地创建了可重用的选择器函数 getUsersWithFilter，它读取 Redux store 中的 users 和 filter，并根据条件进行筛选。
关联选择器与 store
选择器本身是不具有任何与 store 相关的信息的，因此我们需要将选择器与 store 相关联。下面是关联步骤的示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ - -------- - ---- --------------------
------ - ------------------- --------------------- - ---- -------------
---
----- ----- - --------------------
----- --- - -- -- -
--------- --------------
---------------------
----------------------------------
--------------------------------------------------
--
-----------
-在这个示例中，我们首先使用 createStore 创建了一个 Redux store。然后，我们在 Provider 组件中使用了该 store，并将 getUsersWithFilter 和 getUsersWithoutFilter 选择器作为 props 传递给 UsersListWithFilters 组件。
在组件内部，我们可以轻松使用这些选择器函数，以便根据不同的条件渲染不同的数据。
import { useSelector } from 'react-redux'
const UsersListWithFilters = ({ usersSelector, usersWithoutFilterSelector }) => {
const users = useSelector(filter ? usersSelector : usersWithoutFilterSelector)
// 渲染用户列表
}在上面的代码中，我们使用 useSelector 钩子根据条件选择要使用的选择器，并从 Redux store 中获取数据。
总结
使用 reselect 可以帮助我们优化 Redux 应用程序的性能，避免不必要的重复计算。通过创建选择器和将其与 store 相关联，我们可以轻松地编写高效且可维护的代码。
虽然 reselect 看似只是一个小工具，但它可以大幅提升应用程序性能，是我们在开发复杂应用时不可或缺的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658fbc00eb4cecbf2d552b5f