面试官：useReducer 到底强在哪？我：逻辑集中 + 底层懂点！👨‍🏫 本系列由前端面试真题博主 Kincy

👨‍🏫 本系列由前端面试真题博主 Kincy 发起，每日更新一题，通勤路上轻松掌握高频知识点。
📢 如果你想第一时间获取更新，或与群友交流面试经验、内推信息，欢迎加入微信群（文末扫码）！

🧠 系列前言：

面试题千千万，我来帮你挑重点。每天一道，通勤路上、蹲坑时、摸鱼中，技术成长不设限！本系列主打幽默 + 深度 + 面霸必备语录，你只管看，面试场上稳拿 offer！

💬 面试官发问：useReducer 是不是就是另一个版本的 useState？

👨‍💼 “你能不能说说 useReducer 和 useState 的区别？底层原理有啥不同？为啥有两个 Hook 做同样的事？”

来了，这一问可不是让你背 API，它是试图抓你“会用但不理解”的弱点。别慌，今天我们就拿出面霸级回答，连底层都掀给他看！

⚡ 快答区（面霸速记版）

useState 是最直接的状态 Hook，适用于简单状态；
useReducer 更适合复杂状态逻辑，用 reducer 管理更新；
二者都基于 useStateImpl 实现，但底层行为不同：

🔍 底层关键区别：

特性	`useState`	`useReducer`
更新触发机制	支持 `eager bailout`（浅比较优化）	每次都重新执行 reducer（无优化）
初始化方式	接收 `initialState` 或 `lazy initializer`	一律使用 `lazy initializer`
更新函数	可直接传新值或函数	传入 `action`，由 reducer 决定状态变更
是否跳过 re-render	如果新旧值相同，会跳过	即使新旧 state 相同，仍然 re-render（除非自己优化）

🔥 重点理解：

useState 会尝试 eager evaluation（预计算）：
如果你调用 setState 时传的是一个值，它会先浅比较旧值和新值，如果没变，就不触发 re-render！
```
const [count, setCount] = useState(0)
setCount(0) // 不会 re-render，因为值没变
```
而 useReducer 没有这个优化，因为它调用的是 reducer 函数。即便 reducer 返回的 state 一模一样，React 也不知道你是不是做了副作用（虽然不该做） ，所以它就老实地触发 render：
```
dispatch({ type: 'NO_CHANGE' }) // 只要 dispatch，就 re-render
```
👉 所以你想“跳过没必要的 render”？请在 reducer 外层做浅比较或者用 useMemo 等手动优化！

🔍 useReducer 的真本事： "你状态复杂？我逻辑清晰！"

用 useReducer，你就像请了一个“状态调度助理”，让所有状态的变动都有规矩：

状态少用 `useState`，状态多用 `useReducer`

// ✅ 用 useState 管理一个 toggle 很合适
const [open, setOpen] = useState(false)

// 😵 但管理一堆字段 + 逻辑，useState 就有点手忙脚乱了
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [age, setAge] = useState(0)

// ✅ 改用 useReducer，把状态写清楚、逻辑集中处理
const [state, dispatch] = useReducer(reducer, {
  name: '',
  email: '',
  age: 0,
})

function reducer(state, action) {
  switch (action.type) {
    case 'SET_FIELD':
      return { ...state, [action.field]: action.value }
    case 'RESET':
      return initialState
    default:
      return state
  }
}

现在是不是觉得自己像写 Redux 那样干净、清爽又可控？

😎 装 X 语录（限时使用，三分钟有效）

这些话，建议你在“面试时间剩余 5 分钟，气氛稍显紧张”的时候拿出来，效果拔群：

“useReducer 和 useState 底层确实都是在 fiber updateQueue 里注册 hooks，但 useState 支持 eager bailout，useReducer 每次都得走一遍 reducer，性能语义不同。”

“我倾向在逻辑集中、状态联动多的时候用 useReducer，因为它更贴近状态机思维，天然防止状态发散。”

“我们项目里通过 action.type 做了可扩展的 reducer map，还顺手加了 middleware 派发日志，局部 Redux 无痛切换。”

⚠️ 注意：请搭配自信语气和略带深意的眼神食用，面试效果最佳。

🧾 总结一句话

“useReducer 适合状态复杂、逻辑集中，虽然没有 useState 的性能优化（eager bailout），但它胜在架构清晰、便于维护。”

📅 明日预告：React Scheduler 实现原理

你以为 setTimeout 就能搞定调度？React 说：我还有优先级队列、时间切片、协作式调度、MessageChannel……

下一篇，我们就来掀开 React 调度器（Scheduler）的底牌，看它如何实现丝滑的更新体验！

📌 点赞 + 收藏 + 关注系列，一起搞懂 Hooks，不再被面试官“钩”住！

📚 本系列每天一题，持续更新中！
👉 扫码加入【前端面试题交流群】，一起成长、交流、内推、分享机会！

备注“掘金”优先通过

面试官：useReducer 到底强在哪？我：逻辑集中 + 底层懂点！