你何时会使用 useReducer 而不是 useState？

Question

Accepted Answer

`useReducer` 将 state 转换集中在单个 **pure reducer 函数** 中，而不是散布许多 `useState` setter。它是 React 内置的 Redux 模式版本。 ```jsx function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "setStep": return { ...state, step: action.payload }; case "reset": return { count: 0, step: 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 }); // describe WHAT happened, not HOW state changes: return ; } ``` ## 工作原理你 `dispatch` 一个 **action**（描述事件的普通对象）。React 调用 `reducer(currentState, action)` 并使用返回的对象作为新 state。reducer 是 **pure** 的（没有副作用，没有变异），这使得逻辑可预测且在隔离状态下可单元测试。 ## 何时优先于 useState - 下一个 state **以非平凡的方式依赖于** 前一个 state。 - 几个值 **一起改变**（例如 `count` + `step` + `error`）。 - 更新逻辑足够复杂，你需要在多个处理程序中重复它。 ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` 额外优势：`dispatch` 有 **稳定的标识**，所以通过 context 传递它或传给 memoized 子组件不会导致重新渲染。对于简单、独立的值，普通 `useState` 仍然更清晰。