React Hooks之useReducer

在 React 开发中，useState 适用于简单的状态管理，但当状态逻辑复杂、涉及多个状态更新时，useReducer 更具优势。它提供了一种基于 action 触发状态变更的方式，使状态管理更加清晰可控。

useReducer 的基本原理

useReducer 采用 Reducer 模式，与 Redux 类似，它基于“状态 + 动作 = 新状态”的原则更新状态。其基本结构如下：

const [state, dispatch] = useReducer(reducer, initialState);

其中：

• reducer(state, action) 是一个纯函数，接收当前状态和操作指令，返回新的状态。
• initialState 是初始状态。
• dispatch(action) 触发 reducer，更新状态。

示例 1：计数器

const reducer = (state, action) => {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "decrement": return { count: state.count - 1 };
    default: return state;
  }
};

在组件中，通过 dispatch({ type: "increment" }) 触发状态更新。

适用场景

1. 复杂状态管理：当状态变化逻辑复杂，或存在多个状态时，useReducer 可避免 useState 过度嵌套。
2. 派发多个操作：当状态受多个操作影响时，如购物车增减、删除商品等，使用 reducer 能让逻辑更直观。
3. 优化性能：在部分场景下，useReducer 可减少组件不必要的重新渲染。

示例 2：购物车管理

const reducer = (state, action) => {
  switch (action.type) {
    case "add": return state.map(item => item.id === action.id ? { ...item, quantity: item.quantity + 1 } : item);
    case "remove": return state.map(item => item.id === action.id ? { ...item, quantity: Math.max(0, item.quantity - 1) } : item);
    case "updateName": return state.map(item => item.id === action.id ? { ...item, name: action.newName } : item);
    default: return state;
  }
};

总结

useReducer 适用于需要 清晰、结构化管理状态 的场景，它的主要优势包括：

• 逻辑清晰，避免 useState 状态管理的混乱。
• 可扩展性强，方便后续新增操作类型。
• 适用于性能优化，减少不必要的状态更新。

如果你的状态逻辑较复杂，建议使用 useReducer 来增强代码的可维护性和可读性。