Reducer Patterns 减速器惯用法
最后更新：2026-10-28
Reducer Patterns 减速器惯用法
reducer 的几个惯用模式：惰性初始化（第三参传 init 函数）、对象/数组状态的不可变更新、派生值渲染时现算不冗余存储、用 reset action 或换 key 重置整棵状态树。掌握这些，复杂状态机也能保持整洁。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
// 惰性初始化：初始 state 由参数计算
const [state, dispatch] = useReducer(reducer, props, init)
// 重置整个状态树
case 'reset': return init(props)
// 数组不可变更新模板
[...state, item] // 增
state.filter(i => i.id !== id) // 删
state.map(i => i.id === id ? { ...i, done: true } : i) // 改返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
「下一步」累计足迹、「上一步」回退一步、「重置」瞬间回到初始——演示了惰性初始化与 reset 模式。💡 要点
💡 提示 第三参数惰性初始化：初始 state 依赖 props 或计算开销大时使用，只在首次创建时执行。
ℹ️ 说明 「重置组件状态」也可以给外层元素换 key：<Wizard key={resetId} />，整棵子树状态随之重建。
⚠️ 注意 派生值（列表长度、是否全选）渲染时现算，不要存进 state 形成两份真相。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q useReducer 第三个参数什么时候用？
A 初始 state 需要根据 props 计算或构造开销大时：useReducer(reducer, props, init)，init 只在首次执行。
Q 怎么整体重置 reducer 状态？
A 定义 reset action 返回 init(...)；或者给组件换 key，让 React 直接丢弃旧状态树。
Q 嵌套对象更新太啰嗦怎么办？
A 逐层展开 {...a, ...b} 或按路径拆分 state；大型状态可考虑 immer 或状态库的规范化结构。
