使用reducer时，useReducer与带回调的useState是否有实际差异？

首先给出基础 reducer 函数：

function reducer(state, action) {
    if(action.type === 'add')
        return state + action.value;
    if(action.type === 'multiply')
        return state * action.value;
    return state;
}

用法一：使用 useReducer #

const [x, dispatch] = useReducer(reducer, 1);
dispatch({ type: 'add', value: 2 });
dispatch({ type: 'multiply', value: 10 });

用法二：使用带回调的 useState #

const [x, setX] = useState(1);
setX(x => reducer(x, { type: 'add', value: 2 }));
setX(x => reducer(x, { type: 'multiply', value: 10 }));

核心问题解答 #

这两种写法绝非完全等价，useReducer也不是useState的语法糖，React对二者的处理存在本质区别：

• 批量更新逻辑有差异
  在同一个事件循环中多次调用dispatch，React会自动批量处理更新，最终只触发一次组件渲染；虽然React 18之后setState也统一了批量更新逻辑，但在底层实现上，useReducer的dispatch天生适配所有场景的批量更新，不需要额外处理，而早期React版本中，setState在非React管控的异步代码（如setTimeout、Promise回调）中无法自动批量更新，需要手动包裹特殊API才能实现。

• 调试与可追溯性不同
  使用useReducer时，所有状态更新都通过明确的action触发，React DevTools中可以清晰看到每一次更新的action类型、参数，方便回溯调试；而setState回调的方式，DevTools仅能显示“更新函数”，无法直接看到具体的更新逻辑细节，调试成本更高。

• 复杂场景的扩展性差异明显
  当状态逻辑变得复杂（比如多子状态联动、依赖前置状态的复杂更新、需要复用状态逻辑），useReducer可以把所有更新逻辑集中在reducer函数中，代码结构清晰，便于复用和测试；而setState回调的方式会让更新逻辑分散在各个setX调用里，随着复杂度提升，代码会变得混乱难以维护。

• 底层实现与特性支持不同
  React内部对useReducer和useState的处理路径是分开的：useState是简化版的状态管理，但useReducer有专门的action分发、reducer执行逻辑，还支持惰性初始化（第三个参数）等useState不具备的特性——比如可以通过第三个参数延迟计算初始状态，这是useState的回调初始化（仅首次渲染执行一次）做不到的。

内容的提问来源于stack exchange，提问作者Mystical