【React】常用的状态管理库比对

📊 对比表：主流 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`

tsx 复制代码

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

2. `Redux Toolkit`

ts 复制代码

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
  },
});

3. `Jotai`

ts 复制代码

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`

【React】常用的状态管理库比对

📊 对比表：主流 React 状态管理库优劣一览

🧪 示例对比

1. Zustand

2. Redux Toolkit

3. Jotai

🚀 推荐选型建议

1. `Zustand`

2. `Redux Toolkit`

3. `Jotai`