【React中useReducer钩子详解】

useReducer 是 React 中用于管理复杂状态逻辑的 Hook，它通过 集中式状态更新逻辑 替代 useState，尤其适合处理多值关联状态或依赖前序状态更新的场景。以下是其核心要点：

1. 核心概念

Reducer 模式：灵感来自 JavaScript 的 Array.prototype.reduce 和 Redux，通过 (state, action) => newState 函数管理状态变更。
返回值：返回当前状态 state 和派发函数 dispatch，例如：
```
const [state, dispatch] = useReducer(reducer, initialState);
```

2. 参数解析

参数	说明
reducer	纯函数，接收当前状态和 `action`，返回新状态。常用 `switch/case` 处理不同 `action.type`。
initialState	初始状态值（如 `{ count: 0 }`）。
init函数	（可选）惰性初始化，将初始状态计算逻辑封装（如从 `localStorage` 读取）。

3. 工作流程

派发 Action：调用 dispatch({ type: 'increment' }) 触发状态更新。
Reducer 处理：根据 action.type 计算新状态（需返回全新对象，不可直接修改原状态）。
组件渲染：状态更新后组件重新渲染。

4. 对比 `useState`

特性	`useReducer`	`useState`
适用场景	复杂逻辑、多关联状态	简单独立状态
代码组织	逻辑集中，易于维护	逻辑分散在多个 `setState`
性能优化	可避免深层传递回调	需手动优化

5. 典型示例

计数器应用

function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(reducer, { count: 0 });return (<>Count: {state.count}<button onClick={() => dispatch({ type: 'increment' })}>+</button></>);
}

惰性初始化

function init(initialCount) {return { count: initialCount };
}function reducer(state, action) {// ...同上
}function Counter({ initialCount }) {const [state, dispatch] = useReducer(reducer, initialCount, init);// ...
}