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

react hook useReducer

news 来源：原创 2025/6/14 19:36:29

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>
  );
}