📊 对比表：主流 React 状态管理库优劣一览
| 状态管理库 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Context + useReducer | ✔ 原生方案，无需额外依赖 ✔ 逻辑清晰、轻量 ✔ 可按模块拆分 |
❌ 无缓存 ❌ 多层嵌套性能差 ❌ 跨组件通信繁琐 |
中小项目，状态少、结构简单 |
| Redux Toolkit (RTK) | ✔ Redux 官方推荐 ✔ 集成 immer、devtools、TS 支持好 ✔ 拥有 RTK Query 简化异步逻辑 |
❌ 模板代码多，学习曲线略陡 ❌ 对新手稍复杂 |
中大型项目、多人协作、需要时间旅行和强类型 |
| RTK Query | ✔ 自动处理 loading/error/data 状态 ✔ 内建缓存和 refetch 控制 ✔ 数据驱动，极简代码 |
❌ 更适合“远程状态”，不适合 UI 控制类“本地状态” | 接口请求频繁、有强缓存需求的项目 |
| Zustand | ✔ 极简 API，体积极小，无需 Provider ✔ 支持中间件、异步、持久化 ✔ 性能好、组件仅在订阅的状态部分变更时才重新渲染 |
❌ 没有 devtools 需要单独配置 ❌ 较新生态，小众一点 |
喜欢函数式写法、状态自由灵活的项目 |
| Jotai | ✔ 原子化状态管理，局部更新 ✔ 组合性强，适合大型表单 ✔ TS 支持优秀 |
❌ 对新手抽象较深 ❌ 状态依赖链复杂时难以维护 |
大量状态细粒度控制的应用（如表单、图编辑器） |
| Recoil | ✔ 原子化状态、订阅精准 ✔ 跨组件状态通信方便 ✔ 支持派生状态（Selector） |
❌ 社区维护较弱 ❌ 与 React 的集成性不如 Redux |
实验性质项目，组件嵌套深、局部响应需求高 |
| MobX | ✔ 响应式，自动追踪依赖 ✔ 极简代码量，TS 支持好 ✔ 学习曲线平缓 |
❌ 魔法感较强，不易调试 ❌ 对复杂依赖关系控制较弱 |
快速开发、业务逻辑为主的项目 |
🧪 示例对比
1. Zustand
import { create } from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
2. Redux Toolkit
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
},
});
3. Jotai
import { atom } from 'jotai';
export const countAtom = atom(0);
export const incrementAtom = atom(
null,
(get, set) => set(countAtom, get(countAtom) + 1)
);
🚀 推荐选型建议
| 项目规模 | 推荐方案 |
|---|---|
| 学习 / Demo | useReducer + Context / Zustand |
| 中小项目（业务灵活） | Zustand / Jotai |
| 中大型项目（多人协作） | Redux Toolkit（配合 RTK Query） |
| 高并发请求、多页面数据缓存 | RTK Query |
| 响应式、原子化状态 | Jotai / Recoil |
| 快速开发、状态变化简单 | MobX |