什么是 Reselect？
Reselect 是由开发团队在 Redux 上开发的一个库，它提供了一种灵活的方式来创建可记忆选择器（Memoized Selectors）。这些选择器可以筛选 Redux store 中的部分 state 并返回一个派生数据，而不必进行多余计算。
Reselect 可以帮助我们避免不必要的组件重新渲染，提高 React 应用的渲染性能，同时也能简化我们的代码逻辑。
如何使用 Reselect？
Reselect 导出了一个名为 createSelector 的函数，我们可以使用它来创建可记忆选择器。
首先，我们需要定义一个名为select的函数，它从 Redux 存储中获取所有的 state：
const select = state => state;
接下来，我们可以使用 createSelector 函数来创建可记忆选择器。如下所示，我们创建了一个名为selectData的选择器，它会从select函数返回的 state 中提取我们需要的数据并返回它们。
import { createSelector } from 'reselect';
const selectData = createSelector(
select,
state => state.data
);现在，我们可以像这样在组件中使用我们的 selectData 选择器：
import { useSelector } from 'react-redux';
function MyComponent() {
const data = useSelector(selectData);
// ...
}为什么要使用 Reselect？
使用 Reselect 可以提高 React 应用的性能，因为它允许我们避免不必要的组件重新渲染。
在 Redux 应用中，当任何 state 改变时，所有与之相关的组件都会重新渲染。这可能会导致一些性能问题，尤其是当我们的 state 非常大或者我们的组件嵌套层次很深时。
Reselect 可以帮助我们缓存与所选 state 相关的值，当 state 的值发生变化时，我们可以避免重新计算这些值。这样，我们就可以避免不必要的重新渲染，并提高应用的性能。
示例代码
下面是一个示例代码，说明如何使用 Reselect 来避免不必要的组件重新渲染。
假设我们有一个 Redux store，它包含一个列表的数据：
const state = {
list: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' },
{ id: 4, name: 'Alice' },
],
};我们希望从列表中筛选出所有的名字，不过我们只想在列表发生变化时重新计算这些名字。
下面是我们如何使用 Reselect 来创建可记忆选择器：
// javascriptcn.com 代码示例
import { createSelector } from 'reselect';
// 获取所有的 state
const select = state => state;
// 从 state 中获取列表
const selectList = createSelector(
select,
state => state.list
);
// 筛选所有的名字
const selectNames = createSelector(
selectList,
list => list.map(item => item.name)
);现在，我们可以在组件中使用 selectNames 选择器，如下所示：
import { useSelector } from 'react-redux';
function MyComponent() {
const names = useSelector(selectNames);
// ...
}在这个例子中，当列表的状态发生变化时，我们只会重新计算名字一次。这有助于避免不必要的重新渲染，并提高应用程序的整体性能。
总结
Reselect 是一个非常有用的库，它可以帮助我们避免不必要的组件重新渲染，并提高 React 应用的性能。
通过创建可记忆的选择器，我们可以缓存与所选 state 相关的数据，并在需要时重新计算它们。这样，我们就可以避免不必要的重新渲染，并提高应用的整体性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653cdd477d4982a6eb6d2fa3