什么是状态管理中的选择器和记忆化？

Question

什么是状态管理中的选择器和记忆化？

Accepted Answer

**选择器**是一个从状态中**读取（派生）特定数据片段的函数**。**记忆化**缓存选择器的结果，使其仅在输入变化时重新计算——当选择器执行昂贵操作或避免不必要的重新渲染时，这对性能很重要。

## 基础选择器——封装状态访问

```js
// a selector knows HOW to pull a value out of the state shape
const selectUser = state => state.user;
const selectCartItems = state => state.cart.items;
const selectCartTotal = state =>
  state.cart.items.reduce((sum, i) => sum + i.price, 0); // derived
```

选择器集中管理对状态结构的理解——组件只需调用 `selectCartTotal(state)` 而无需知道数据存储的位置或方式，所以如果状态形状变化，你只需更新一个选择器，而不是每个组件。

## 问题：派生选择器在每次调用时都会重新计算

```js
const selectExpensiveList = state =>
  state.items.filter(i => i.active).sort(compareFn); // runs EVERY time, even if items didn't change
```

创建新数组/对象的选择器每次调用都返回一个**新引用**——这可能触发不必要的重新渲染（React 看到一个"新"值），并浪费计算资源。

## 解决方案：记忆化选择器（Reselect）

```js
import { createSelector } from "reselect"; // or RTK's createSelector

const selectActiveSorted = createSelector(
  [state => state.items],                       // input selector(s)
  (items) => items.filter(i => i.active).sort(compareFn) // recompute ONLY if items changed
);
```

`createSelector` 缓存结果，仅当其输入（`state.items`）实际变化时才重新运行昂贵的计算——否则它返回**相同的引用**，既防止了重新计算，也防止了下游组件的不必要重新渲染。

## 组合选择器

```js
const selectTotal = createSelector(
  [selectActiveSorted, selectTaxRate],          // build on other selectors
  (items, rate) => items.reduce((s, i) => s + i.price, 0) * (1 + rate)
);
```

选择器可以组合，从简单的、各自缓存的片段构建复杂的派生。

## 为什么这很重要

选择器将组件与状态的形状解耦（提高可维护性），并提供一个表达派生数据的统一位置。

记忆化使派生选择器高效——避免了重复的昂贵计算，更重要的是返回稳定的引用，使连接的组件不会不必要地重新渲染。

在 Redux/NgRx 应用中，记忆化选择器（Reselect/`createSelector`）是关键的性能和架构工具；同样的缓存思想在其他地方也出现为 `useMemo` 和 `computed`。