选择器是一个从状态中读取(派生)特定数据片段的函数。记忆化缓存选择器的结果,使其仅在输入变化时重新计算——当选择器执行昂贵操作或避免不必要的重新渲染时,这对性能很重要。
基础选择器——封装状态访问
js
= state => state.;
= state => state..;
= state =>
state...( sum + i., );
选择器集中管理对状态结构的理解——组件只需调用 selectCartTotal(state) 而无需知道数据存储的位置或方式,所以如果状态形状变化,你只需更新一个选择器,而不是每个组件。
const selectExpensiveList = state =>
state.items.filter(i => i.active).sort(compareFn); // runs EVERY time, even if items didn't change
创建新数组/对象的选择器每次调用都返回一个新引用——这可能触发不必要的重新渲染(React 看到一个"新"值),并浪费计算资源。
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)实际变化时才重新运行昂贵的计算——否则它返回相同的引用,既防止了重新计算,也防止了下游组件的不必要重新渲染。
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。