useReducer 和 useState 都是 React 中用于管理组件状态的 Hook，它们都可以用来在函数组件中存储和更新状态。然而，它们之间有一些重要的区别： 用法不同：useState 是 React 提供的最基本的 Hook，用于在函数组件中添加状态。它返回一个包含状态值和更新状态的函数的数组，通过解构赋值可以获取状态值和更新状态的函数。useReducer 是另一个用于状态管理的 Hook，它更适用于复杂的状态逻辑。useReducer 接收一个 reducer 函数和初始状态，并返回当前状态和 dispatch 函数。reducer 函数用于处理不同的操作类型，并返回新的状态。 适用场景不同：useState 适用于简单的状态管理，当状态之间没有复杂的依赖关系时，使用 useState 更为简洁和直观。useReducer 适用于复杂的状态逻辑，当状态之间有复杂的依赖关系或需要进行多种操作时，使用 useReducer 更为灵活和可控。 处理复杂状态逻辑：useState 在处理复杂状态逻辑时，可能需要多次使用 useState 来管理不同的状态，导致状态之间关系不够清晰，可读性较差。useReducer 可以通过定义多个操作类型，将不同的状态逻辑拆分到 reducer 函数中，使得状态之间的关系更加清晰，更易于维护。 性能优化：useReducer 在某些情况下可以提供性能优化。当某个状态的更新依赖于其他状态时，使用 useReducer 可以确保更新是同步的，而不是像 useState 那样是异步的。但是在大多数情况下，useState 和 useReducer 的性能差异并不明显，React 会对其进行优化，所以性能的选择并不是主要的考虑因素。

补充

补充：useState 与 useReducer 都可以在函数组件中保存状态，选择主要取决于「状态结构的复杂度」和「更新逻辑的复用度」。

简单使用对比：

// useState：单个或少量独立状态
const [count, setCount] = useState(0);

// useReducer：状态由多个子值组成 / 更新逻辑较复杂
const initial = { count: 0, step: 1 };
function reducer(state, action) {
  switch (action.type) {
    case 'inc': return { ...state, count: state.count + state.step };
    case 'reset': return initial;
    default: return state;
  }
}
const [state, dispatch] = useReducer(reducer, initial);

选型建议：

  • 状态相互独立、不需要集中处理：用 useState。
  • 状态耦合、需要根据 action 派生新值、或者更新逻辑可被多处复用：用 useReducer。
  • 把 reducer 抽成纯函数后，可以用 useReducer + Context 模拟轻量 Redux。

补充：两者底层都把状态挂在 Fiber 节点的 memoizedState 上，差异主要体现在写法层面，运行时性能相近。