Redux Reselect 最佳实践指南：提升选择器性能的关键策略-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00131/article/details/148374704

Redux Reselect 最佳实践指南：提升选择器性能的关键策略

reselect reduxjs/reselect: Reselect 是一个用于 Redux 的选择器库，可以用于优化 Redux 应用程序的性能，支持多种 Redux 功能和工具，如 Redux，React-Redux，Reselect 项目地址: https://gitcode.com/gh_mirrors/re/reselect

前言

在现代前端应用中，状态管理是构建复杂应用的核心环节。作为 Redux 生态中的重要成员，Reselect 库通过记忆化（memoization）技术为 Redux 应用提供了高效的选择器（selector）实现方案。本文将深入探讨 Reselect 的最佳实践，帮助开发者充分发挥其性能优势。

理解 Reselect 的核心机制

Reselect 的核心价值在于其级联记忆化（Cascading Memoization）机制。这种机制通过多层次的缓存检查来避免不必要的计算：

参数引用检查：首先比较输入参数是否与上次调用时相同
输入选择器结果检查：然后比较各输入选择器的返回值是否变化
最终计算执行：只有当前面所有检查都未通过时，才会执行结果函数

理解这一机制是优化选择器性能的基础。

最佳实践详解

1. 保持参数引用稳定

Reselect 的第一层性能优化依赖于输入参数的引用比较。因此：

对于 Redux 状态：由于 Redux 状态树在每次更新时都会生成新引用，这是不可避免的
对于额外参数：应当尽量保持稳定
- 优先使用原始值（如数字ID）
- 如需传递对象或数组，确保它们的引用不会频繁变化

// 推荐做法 - 使用稳定参数
const selectTodoById = createSelector(
  [state => state.todos, (state, id) => id],
  (todos, id) => todos[id]
)

2. 简化输入选择器

输入选择器（Input Selectors）应当尽可能简单：

理想情况下只做简单的字段访问
避免在输入选择器中进行任何计算
绝对不要在输入选择器中返回新创建的对象或数组

// 推荐做法 - 简单的字段访问
const goodSelector = createSelector(
  [state => state.todos],
  todos => expensiveComputation(todos)
)

// 反模式 - 在输入选择器中计算
const badSelector = createSelector(
  [state => expensiveComputation(state.todos)], // 不推荐！
  result => anotherComputation(result)
)

3. 集中处理计算逻辑

所有复杂计算都应放在结果函数（Result Function）中：

Reselect 只会在必要时执行结果函数
这种设计使得昂贵的计算被最大限度地减少
逻辑集中也提高了代码的可维护性

// 推荐结构
const optimalSelector = createSelector(
  [
    state => state.todos,
    state => state.visibilityFilter
  ],
  (todos, filter) => {
    // 所有计算逻辑集中在这里
    const filteredTodos = filterTodos(todos, filter)
    return calculateDerivedData(filteredTodos)
  }
)

高级优化技巧

1. 参数规范化

对于需要处理动态参数（如ID）的选择器：

const makeSelectTodo = () => createSelector(
  [state => state.todos, (state, id) => id],
  (todos, id) => todos[id]
)

// 使用时创建实例并保持引用
const selectTodo = makeSelectTodo()

2. 组合选择器

通过组合小型选择器构建复杂逻辑：

const selectTodos = state => state.todos
const selectFilter = state => state.visibilityFilter

const selectVisibleTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => filterTodos(todos, filter)
)

const selectTodoStats = createSelector(
  [selectVisibleTodos],
  todos => calculateStats(todos)
)