一、React 状态管理全家桶总览
可以一句话先抛给面试官:
React 状态管理 = 本地状态 + 跨组件状态 + 全局状态
二、核心方案对比表(重点)
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| useState | 简单、直观、零成本 | 只能组件内 | 表单、UI 状态 |
| useReducer | 逻辑集中、可预测 | 样板代码偏多 | 复杂组件状态 |
| Context | 原生、无需三方库 | 性能差、难维护 | 主题、语言 |
| Redux | 可预测、生态成熟 | 心智负担重 | 中大型项目 |
| Redux Toolkit | 语法简洁、官方推荐 | 仍偏全局 | 企业级项目 |
| MobX | 响应式、上手快 | 隐式更新 | 快速业务开发 |
| Zustand | 轻量、Hooks 风格 | 生态较小 | 中小项目 |
| Recoil | 原子化、React 思维 | 社区停滞 | 组件级共享 |
| Jotai | 极简、可组合 | 学习曲线 | 细粒度状态 |
| URL State | 可分享、可回溯 | 不适合复杂数据 | 查询条件 |
三、逐个深挖(面试官最爱问的)
1️⃣ useState(一定要说,但别停在这)
优点
- 最简单
- React 内置
缺点
- 只能组件内
- 组件层级深就失控
应用场景
- 弹窗开关
- 输入框
- loading 状态
面试话术
useState 适合组件私有状态,不建议用来做跨组件通信。
2️⃣ useReducer(被低估的利器)
优点
- 状态变更可预测
- 逻辑集中
缺点
- 写起来啰嗦
应用场景
- 表单状态
- 多步骤流程
面试话术
当状态变化有明确动作时,我会优先用 useReducer,而不是堆多个 useState。
3️⃣ Context(面试陷阱点)
优点
- 原生
- 无依赖
缺点
- value 变化 → 全量重渲
- 不适合频繁更新
应用场景
- 主题
- 国际化
- 登录态(只读)
面试话术
Context 更适合低频、全局只读状态,不适合复杂业务状态。
4️⃣ Redux(面试官老朋友)
优点
- 单一数据源
- 可预测
- 调试友好
缺点
- 模板代码多
- 上手成本高
应用场景
- 中大型应用
- 多人协作
面试话术
Redux 的优势在于可维护性,而不是开发效率。
5️⃣ Redux Toolkit(现在主流答案)
优点
- 减少样板代码
- 官方推荐
- 内置 immer
缺点
- 仍是全局 store
应用场景
- 企业级后台
- 状态复杂
面试话术
新项目我会优先使用 Redux Toolkit,而不是原始 Redux。
6️⃣ MobX(争议型)
优点
- 响应式
- 写起来快
缺点
- 隐式依赖
- 调试困难
应用场景
- 原型开发
- 快速迭代项目
面试话术
MobX 更偏开发效率,但在多人协作中可维护性需要规范约束。
7️⃣ Zustand(近几年面试加分)
优点
- 极简
- 无样板代码
- Hooks 风格
缺点
- 生态不如 Redux
应用场景
- 中小型项目
- React Hooks 项目
面试话术
Zustand 在性能和简洁性上很平衡,适合不想引入 Redux 的项目。
8️⃣ Recoil / Jotai(高手才提)
优点
- 原子化
- 精准更新
缺点
- 社区不稳定(Recoil)
应用场景
- 组件级共享状态
面试话术
原子化状态在复杂组件树中能显著减少无效渲染。
四、面试官最爱追问:你怎么选?
🎯 标准选型口诀(建议背)
小 → useState
复杂组件 → useReducer
低频全局 → Context
复杂业务 → Redux Toolkit
轻量全局 → Zustand
五、结合你背景的“高分回答模板”
在性能平台这种多页面、多筛选条件、跨组件通信频繁的场景,我会用 Redux Toolkit 管理核心业务状态,同时把局部 UI 状态留在组件内部,用 useState 或 useReducer,避免全局 store 过度膨胀。