当前位置：首页 > news >正文

react hook useReducer

news 2025/2/22 21:21:56

useReducer

useReducer 是 React 中用于状态管理的 Hook，与 useState 不同，它更适合处理复杂的状态逻辑.

const [state, dispatch] = useReducer(reducer, initialArg, init?)
reducer 是一个处理函数，用于更新状态,
reducer 里面包含了两个参数，第一个参数是 state，
第二个参数是 action。
reducer 会返回一个新的 state。initialArg 是 state 的初始值。init 是一个可选的函数，用于初始化 state，如果编写了init函数，则默认值使用init函数的返回值，否则使用initialArg。
``3. 适合复杂状态场景
当状态逻辑复杂或状态之间存在依赖关系时，useReducer 比 useState 更合适。例如，表单验证、多步骤操作、状态机等场景，useReducer 可以更好地组织代码。4. 与 useState 的对比
useState 适合简单的状态管理，每个状态独立更新。useReducer 适合需要集中管理和协调多个状态的场景，状态更新逻辑更集中。```javascript
const initialState = { count: 0 };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, initialState);return (<div>Count: {state.count}<button onClick={() => dispatch({ type: 'incre' })}>+</button><button onClick={() => dispatch({ type: 'decre' })}>-</button></div>);
}