React useReducer 什么时候比 useState 更好？

Question

仓乃文 · Accepted Answer

当状态逻辑复杂、多个子值互相依赖、或下一个状态依赖前一个状态时，useReducer 比 useState 更清晰。useState 适合独立简单的状态，useReducer 适合有明确状态机的场景。

useReducer 适用场景：
```javascript
function formReducer(state, action) {
  switch (action.type) {
    case "SET_FIELD":
      return { ...state, [action.field]: action.value };
    case "RESET":
      return action.initialState;
    case "SET_ERRORS":
      return { ...state, errors: { ...state.errors, ...action.errors } };
    default:
      return state;
  }
}

useState 也能做但代码更乱的场景：
```javascript
// useState 写法：多个 setState 散落各处，逻辑不集中
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [errors, setErrors] = useState({});
// 重置需要逐个调用
const reset = () => { setUsername(""); setEmail(""); setErrors({}); };
```

补充说明：
- 状态超过 3 个关联字段时，useReducer 的优势明显
- reducer 是纯函数，方便单元测试
- dispatch 是稳定引用，不需要像 setState 一样担心闭包陷阱
- 可以把 reducer 提取到外部文件，实现逻辑复用