useReducer 状态减速器
最后更新：2026-10-28
useReducer 状态减速器
useReducer 把「状态怎么变」集中到一个纯函数 reducer 里：dispatch(action) 触发，reducer 依 action 算出新状态。状态迁移多、逻辑复杂或多个值要一起变时，比一堆 useState 更清晰可测。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | Hook |
| 引入版本 | React 16.8 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 }
case 'reset': return { count: 0 }
default: return state // 未知 action 返回原状态
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 })
dispatch({ type: 'increment' })⚙️ 参数
| reducer | (state, action) => newState 的纯函数：不能有副作用，不能直接修改 state，必须返回新对象。 |
|---|---|
| initialArg | 初始状态；第三个参数可传惰性初始化函数 init(initialArg)。 |
返回值：返回 [state, dispatch]：当前状态与派发函数。dispatch 引用恒定不变，可放心放进依赖数组或传给子组件。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
三个按钮分别派发 inc/dec/reset 三种 action，计数由 reducer 统一计算，UI 实时更新。💡 要点
💡 提示 dispatch 函数引用稳定，作为 props 传给深层组件不必再包 useCallback。
ℹ️ 说明 reducer 必须是纯函数：请求数据、写 localStorage 等副作用放到事件处理器或 useEffect 里。
⚠️ 注意 直接修改 state（state.count++）是经典错误——始终返回新对象。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q useReducer 和 useState 怎么选？
A 独立简单值用 useState；多个值联动、更新逻辑复杂、下一步依赖上一步时用 useReducer。
Q reducer 里能发请求吗？
A 不能，reducer 必须是纯函数。请求放事件处理器或 effect，完成后 dispatch 存结果。
Q dispatch 之后能立刻读到新 state 吗？
A 不能。dispatch 只排队触发重渲染，本次闭包里的 state 仍是旧值；需要时用 useEffect 监听。
