如何使用 Redux-Reselect 优化性能

Redux-Reselect 是一个优秀的 React 应用程序的性能优化库，它可以通过缓存计算结果来提高应用程序的渲染速度。在 Redux 应用程序中，当 state 发生变化时，组件会重新渲染，这可能会导致性能问题。Redux-Reselect 可以帮助您避免这种情况，让您的应用程序更快、更可靠。

Redux-Reselect 的使用

Redux-Reselect 的使用非常简单。首先，您需要安装它：

npm install reselect reselect-map

然后，您需要在组件中定义一个 selector 函数。这个函数接受 state 作为参数，并返回一个计算结果。这个计算结果可以是一个简单的值，也可以是一个对象、数组等等。

// www.javascriptcn.com code example
import { createSelector } from 'reselect';

const getTodos = state => state.todos;
const getFilter = state => state.filter;

export const getVisibleTodos = createSelector(
  [getTodos, getFilter],
  (todos, filter) => {
    switch (filter) {
      case 'SHOW_ALL':
        return todos;
      case 'SHOW_COMPLETED':
        return todos.filter(t => t.completed);
      case 'SHOW_ACTIVE':
        return todos.filter(t => !t.completed);
      default:
        throw new Error('Unknown filter: ' + filter);
    }
  }
);

在这个例子中，我们定义了一个名为 getVisibleTodos 的 selector 函数。它接受两个参数：getTodos 和 getFilter。这两个函数都是获取 state 中的数据的函数。最后，我们定义了一个函数，它接受 todos 和 filter 作为参数，并返回一个计算结果。

接下来，在组件中使用这个 selector 函数：

// www.javascriptcn.com code example
import { connect } from 'react-redux';
import { getVisibleTodos } from '../selectors';

const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>{todo.text}</li>
    ))}
  </ul>
);

const mapStateToProps = state => ({
  todos: getVisibleTodos(state)
});

export default connect(mapStateToProps)(TodoList);

在这个例子中，我们使用 connect 函数将组件连接到 Redux store。然后，我们使用 mapStateToProps 函数将 state 中的数据传递给组件。在这个函数中，我们使用 getVisibleTodos 函数获取 state 中的数据并返回它。

现在，每当 state 发生变化时，getVisibleTodos 函数都会重新计算并返回一个新的值。但是，如果 state 中的数据没有发生变化，这个函数就会返回之前计算的结果，从而避免不必要的计算。

Redux-Reselect 的进阶使用

除了基本的用法，Redux-Reselect 还提供了一些高级功能。例如，您可以使用 createSelectorCreator 函数来创建自定义的 selector 工厂。这个函数接受一个参数，它是一个缓存对象。您可以使用这个对象来手动缓存计算结果。

// www.javascriptcn.com code example
import { createSelectorCreator, defaultMemoize } from 'reselect';

const createCachedSelector = createSelectorCreator(
  defaultMemoize,
  (a, b) => a === b
);

const getTodoById = createCachedSelector(
  [getTodos, (state, id) => id],
  (todos, id) => todos.find(todo => todo.id === id)
);

在这个例子中，我们使用 createSelectorCreator 函数创建了一个名为 createCachedSelector 的自定义 selector 工厂。这个函数接受两个参数：一个是 defaultMemoize 函数，用于缓存计算结果；另一个是比较函数，用于比较参数是否相等。然后，我们使用这个工厂创建了一个名为 getTodoById 的 selector 函数。它接受两个参数：getTodos 和一个 ID。当 ID 发生变化时，它会重新计算结果，并将结果缓存起来。

Redux-Reselect 的指导意义

Redux-Reselect 可以帮助您避免不必要的计算，从而提高应用程序的性能。它可以让您的应用程序更快、更可靠，并且可以让您的代码更易于维护。如果您正在开发一个大型的 Redux 应用程序，那么 Redux-Reselect 绝对是一个值得尝试的库。

示例代码

您可以在以下链接中找到完整的示例代码：

https://github.com/reduxjs/reselect#example

在这个示例中，我们使用 Redux-Reselect 来计算可见的待办事项。我们定义了一个名为 getVisibleTodos 的 selector 函数，并在组件中使用它来获取可见的待办事项。当 state 中的数据发生变化时，这个函数会重新计算。但是，如果 state 中的数据没有发生变化，它就会返回之前计算的结果，从而避免不必要的计算。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2957ba941bf71344ea8ad