React 中的 useReducer：状态管理的进阶利器

在 React 开发中，状态管理是构建交互式应用的核心。当你需要管理多个相关联的状态，或者状态更新逻辑变得复杂时，useReducer 就是你的秘密武器。它比 useState 更适合处理复杂的状态场景，让代码更清晰、更易维护。

一、什么是 useReducer？

useReducer 是 React 提供的高级 Hook，它借鉴了 Redux 的设计思想，通过三个核心部分管理状态：

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

• state：当前的状态值
• dispatch：发送"动作指令"的函数
• reducer：处理状态更新的"控制器"
• initialState：初始状态值

为什么需要 useReducer？

当你的组件状态变得复杂时，useState 可能不够用了：

• 多个状态相互关联
• 状态更新逻辑复杂
• 需要在不同地方执行相同状态更新
• 状态变化难以追踪

useReducer 通过集中处理状态更新，解决这些问题。

二、核心概念解析

Reducer：状态更新的核心

Reducer 是一个纯函数，接收当前状态和动作(action)，返回新状态：

function reducer(state, action) {
  switch (action.type) {
    case '增加':
      return { count: state.count + 1 };
    case '减少':
      return { count: state.count - 1 };
    case '设置':
      return { count: action.value };
    default:
      return state;
  }
}

纯函数特性：

• 相同输入 ⇒ 相同输出
• 不修改外部状态
• 无副作用（不执行API调用等）

动作(Action)：状态更新的指令

动作是一个描述"发生了什么"的普通对象：

dispatch({ type: '增加' });
dispatch({ type: '设置', value: 10 });

三、实战示例：计数器应用

让我们通过计数器展示 useReducer 的基本用法：

import React, { useReducer } from 'react';

// 1. 定义初始状态
const initialState = { count: 0 };

// 2. 创建 reducer 函数
function counterReducer(state, action) {
  switch (action.type) {
    case '增加':
      return { count: state.count + 1 };
    case '减少':
      return { count: state.count - 1 };
    case '重置':
      return { count: 0 };
    case '设置':
      return { count: action.value };
    default:
      return state;
  }
}

function Counter() {
  // 3. 使用 useReducer
  const [state, dispatch] = useReducer(counterReducer, initialState);
  
  return (
    <div>
      <h2>计数器: {state.count}</h2>
      <button onClick={() => dispatch({ type: '增加' })}>+1</button>
      <button onClick={() => dispatch({ type: '减少' })}>-1</button>
      <button onClick={() => dispatch({ type: '重置' })}>重置</button>
      
      <div style={{ marginTop: '10px' }}>
        <input 
          type="number"
          value={state.count}
          onChange={(e) => 
            dispatch({ type: '设置', value: Number(e.target.value) })
          }
        />
      </div>
    </div>
  );
}

在这个例子中：

1. 所有状态更新逻辑集中在 counterReducer 中
2. 组件通过 dispatch 发送指令
3. 状态更新变得清晰可预测

四、useReducer vs useState：如何选择？

情况	使用 useState	使用 useReducer
状态数量	1-3个独立状态	多个关联状态
更新逻辑	简单直接更新	复杂更新逻辑
代码位置	更新在组件内	更新在reducer中
可维护性	简单场景良好	复杂场景更优
状态关系	状态相互独立	状态相互关联

五、 全局状态管理：useReducer + useContext

当多个组件需要共享状态时，可以结合 useContext：

// 1. 创建Context
const CounterContext = React.createContext();

function App() {
  const [state, dispatch] = useReducer(counterReducer, initialState);
  
  return (
    // 2. 提供状态和方法
    <CounterContext.Provider value={{ state, dispatch }}>
      <Header />
      <CounterDisplay />
      <CounterControls />
    </CounterContext.Provider>
  );
}

// 3. 在子组件中使用
function CounterDisplay() {
  const { state } = useContext(CounterContext);
  return <h2>当前计数: {state.count}</h2>;
}

function CounterControls() {
  const { dispatch } = useContext(CounterContext);
  
  return (
    <div>
      <button onClick={() => dispatch({ type: '增加' })}>增加</button>
      <button onClick={() => dispatch({ type: '减少' })}>减少</button>
    </div>
  );
}

这种方法不需要第三方库，就能实现组件间的状态共享。

六、最佳实践建议

1. 保持 reducer 纯净：不要在里面执行API调用等副作用
2. 使用描述性的 action 类型：如 'ADD_USER' 比 'DO_SOMETHING' 更清晰
3. 拆分大型 reducer：如果逻辑太复杂，拆分成多个小reducer
4. 初始状态单独定义：方便管理和维护
5. 组件中只调用 dispatch：复杂逻辑放在reducer中处理

七、记住：何时使用 useReducer

useReducer 是 React 状态管理的重要工具，特别适合：

• ✅ 管理关联状态（如表单字段）
• ✅ 处理复杂状态更新逻辑
• ✅ 在多个组件间共享状态更新方法
• ✅ 需要清晰的状态变更历史

简单原则：当你的状态更新代码开始变得复杂，或者多个useState调用相互依赖时，就是尝试useReducer的好时机！