useState和useReducer有什么区别？

在React函数组件里管理状态，useState是你的老朋友，简单直接。但当状态逻辑变得复杂，一堆setState挤在一起互相影响时，useReducer就该登场了。它俩都能管状态，但脾气和适用场景很不一样。

useState：一把钥匙开一把锁

useState适合管理独立、简单的状态。一个状态值，配一个专门更新它的setter函数，各管各的，非常清晰。

const [count, setCount] = useState(0);
const [name, setName] = useState('小明');

更新就是直接调用setter：setCount(5)。逻辑就写在事件处理函数里，对于简单的开关、表单字段、计数器，这简直完美。

useReducer：把状态更新规则收编起来

useReducer更像一个状态管理调度中心。它把状态和更新逻辑分离了。你定义一个reducer函数，它根据不同的“指令”（action）来决定如何从旧状态计算出新状态。

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'set':
      return { count: action.payload };
    default:
      return state;
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      计数: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'set', payload: 10 })}>设为10</button>
    </>
  );
}

看到没，你不直接改状态，而是dispatch一个描述“发生了什么”的action对象（比如{ type: 'increment' }）。reducer函数是这个系统里唯一的规则制定者，所有状态变化都必须经过它。这让你能集中管理复杂的更新逻辑。

什么时候该用哪个？

用useState，当你的状态更新：

• 简单到一两行代码就能写完。
• 彼此独立，不互相依赖。
• 逻辑就散落在各个事件处理函数里也没关系。

该考虑useReducer了，当你的状态：

• 结构复杂，是一个包含多个字段的对象。
• 一次更新依赖于之前的状态（比如叠加计算）。
• 更新逻辑很复杂，分散在各处难以维护。
• 需要从子组件深层触发更新，dispatch函数比多个setter更容易传递。

一个简单的比方：useState像是你钱包里一张张独立的钞票，每张自己花。useReducer像是你的银行账户，所有存取款（dispatch动作）都得走一套固定的流程（reducer函数），记录清晰，规则统一。

所以，别把useReducer想得太高级。它就是useState的升级版，专门用来对付那些“一把钥匙开不了”的复杂状态锁。