React useReducer 复杂状态前置React Context 跨层传值目标会写reducer(state, action)理解何时从useState升级。引言一个开关、一个输入框 →useState最爽。状态字段变多、更新规则互相牵扯时一堆setX/setY容易乱。useReducer把「怎么从旧状态算出新状态」收进纯函数reducer(state, action)组件里只dispatch({ type: ... })。本篇 demo计数器 可调步长 重置四种 action。动手完整代码react2/12-usereducer/democdreact2/12-usereducer/demonpminstallnpmrun dev改步长再点step/-step点「重置」回到count0, step1。1. 定义 state / action / reducertype State { count: number; step: number } type Action | { type: inc } | { type: dec } | { type: setStep; step: number } | { type: reset } function reducer(state: State, action: Action): State { switch (action.type) { case inc: return { ...state, count: state.count state.step } case dec: return { ...state, count: state.count - state.step } case setStep: return { ...state, step: action.step } case reset: return { count: 0, step: 1 } default: return state } }约定纯函数同样输入 → 同样输出不写副作用不可变更新返回新对象别直接改state.count ...action.type描述「发生了什么」不是「把 count 设成几」2. 组件里dispatchconst [state, dispatch] useReducer(reducer, { count: 0, step: 1 }) button onClick{() dispatch({ type: inc })}step/button button onClick{() dispatch({ type: dec })}-step/button button onClick{() dispatch({ type: reset })}重置/button input typenumber value{state.step} onChange{(e) dispatch({ type: setStep, step: Number(e.target.value) || 1 }) } /UI 只发意图怎么改状态全在 reducer。3. 何时从 useState 升级继续 useState考虑 useReducer单个布尔 / 字符串下一状态严重依赖上一状态字段少、更新简单同一状态有多种「动作」想把更新逻辑抽到组件外测useReducer Context 常一起做中等复杂度的客户端状态更大更碎的全局状态看 Zustand15 篇。4. 常见坑做法问题reducer 里fetch/ 改 DOM副作用放错地方副作用进 event / effect直接 mutatestateReact 可能检测不到更新action 设计成「setCount(5)」一堆丢失「意图」能工作但难推理简单开关也上 reducer过度useState更短demo 在练什么手写State/Action/reducer用dispatch驱动多动作更新体会「步长影响加减」这种跨字段规则放在 reducer 里更清晰自己改一改加type: double或把初始 state 换成惰性初始化useReducer(reducer, undefined, init)。下一篇React 嵌套路由与布局
)
