React 状态管理与数据获取库深度对比：从 Redux 到 Zustand

在现代 React 开发中，状态管理远不止 useState 和 useReducer。面对全局状态、服务端数据同步、性能优化等挑战，社区涌现出多种解决方案。本文将深入对比 jotai、mobx-react、mobx-react-lite、react-query、react-redux、recoil、redux 和 zustand，帮助你在真实项目中做出明智选择。

重要提示：mobx-react 已在官方文档中标记为“仅用于遗留项目”，新项目应使用 mobx-react-lite。本文仍包含它以供迁移参考。

🧠 核心理念：状态模型的根本差异

不同库对“状态”本身的理解截然不同，这直接影响了代码组织方式。

全局单一状态树（Redux）

redux 和 react-redux 基于单一不可变状态树。所有状态变更必须通过纯函数（reducers）处理 action。

// redux + react-redux
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

const initialState = { count: 0 };
const reducer = (state = initialState, action) => {
  if (action.type === 'increment') return { count: state.count + 1 };
  return state;
};
const store = createStore(reducer);

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: 'increment' })}>{count}</button>;
}

// App.js
<Provider store={store}>
  <Counter />
</Provider>

响应式可观察对象（MobX）

mobx-react-lite 将状态视为可观察对象，组件自动追踪所用属性并在变化时重渲染。

// mobx-react-lite
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

class Store {
  count = 0;
  constructor() { makeAutoObservable(this); }
  increment = () => { this.count++; };
}
const store = new Store();

const Counter = observer(() => (
  <button onClick={store.increment}>{store.count}</button>
));

原子化状态（Recoil / Jotai）

recoil 和 jotai 将状态拆分为独立的“原子”（atoms），支持派生状态（selectors）。

// recoil
import { atom, useRecoilState, selector } from 'recoil';

const countAtom = atom({ key: 'count', default: 0 });
const doubledCount = selector({
  key: 'doubledCount',
  get: ({ get }) => get(countAtom) * 2
});

function Counter() {
  const [count, setCount] = useRecoilState(countAtom);
  const double = useRecoilValue(doubledCount);
  return <div>{count} → {double}</div>;
}

// jotai（无需 Provider）
import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const doubledCount = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [double] = useAtom(doubledCount);
  return <div>{count} → {double}</div>;
}

轻量级可变状态（Zustand）

zustand 提供类似 Redux 的 actions，但允许直接修改状态，且无需 Provider。

// zustand
import { create } from 'zustand';

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

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}

服务端状态专用（React Query）

react-query 不管理 UI 状态，而是处理异步数据获取、缓存和同步。

// react-query
import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId)
  });

  if (isLoading) return <div>Loading...</div>;
  return <div>{data.name}</div>;
}

⚙️ 异步操作处理方式

如何处理副作用（如 API 调用）是状态库的关键差异点。

Redux：中间件驱动

通过 redux-thunk 或 redux-saga 处理异步逻辑。

// redux-thunk
const fetchUser = (id) => async (dispatch) => {
  dispatch({ type: 'FETCH_START' });
  try {
    const user = await api.getUser(id);
    dispatch({ type: 'FETCH_SUCCESS', payload: user });
  } catch (error) {
    dispatch({ type: 'FETCH_ERROR', error });
  }
};

// 在组件中
useEffect(() => {
  dispatch(fetchUser(123));
}, [dispatch]);

MobX：直接在 action 中调用

异步逻辑可直接写在 action 中（需启用 runInAction 或使用 makeAutoObservable 的 async 支持）。

// mobx-react-lite
class UserStore {
  user = null;
  loading = false;

  constructor() { makeAutoObservable(this); }

  async fetchUser(id) {
    this.loading = true;
    try {
      this.user = await api.getUser(id);
    } finally {
      this.loading = false;
    }
  }
}

Recoil / Jotai：异步 Selectors

通过异步 selector 处理数据获取，自动管理加载/错误状态。

// recoil
const userQuery = selector({
  key: 'userQuery',
  get: async ({ get }) => {
    const id = get(userIdAtom);
    const response = await fetch(`/api/users/${id}`);
    return response.json();
  }
});

// jotai
const userAtom = atom(async (get) => {
  const id = get(userIdAtom);
  const res = await fetch(`/api/users/${id}`);
  return res.json();
});

Zustand：直接在 actions 中处理

类似 MobX，异步逻辑可内联在 actions 中。

// zustand
const useStore = create((set) => ({
  user: null,
  loading: false,
  fetchUser: async (id) => {
    set({ loading: true });
    try {
      const user = await api.getUser(id);
      set({ user, loading: false });
    } catch (error) {
      set({ loading: false, error });
    }
  }
}));

React Query：专为异步设计

内置加载、错误、重试、缓存等机制，无需手动管理状态。

// react-query
const { data, error, isLoading, refetch } = useQuery({
  queryKey: ['user', id],
  queryFn: () => api.getUser(id),
  retry: 3,
  staleTime: 5000
});

📦 项目集成复杂度

Provider 必要性

• 需要 Provider：react-redux、mobx-react（通过 Provider）、recoil
• 无需 Provider：jotai、zustand、mobx-react-lite（通过 observer 包装组件）、react-query（通过 QueryClientProvider，但通常只在根组件一次）

// react-redux 需要顶层 Provider
<Provider store={store}>...</Provider>

// recoil 需要
<RecoilRoot>...</RecoilRoot>

// jotai / zustand 无需任何 Provider

Bundle Size 与依赖

虽然不提供具体数字，但可观察到：

• redux + react-redux 需额外引入 @reduxjs/toolkit 才能现代化开发
• mobx-react 比 mobx-react-lite 更重（因支持 class 组件）
• jotai 和 zustand 以轻量著称
• react-query 专注于数据获取，不解决客户端状态问题

🔁 状态更新粒度与性能

细粒度更新

• Recoil / Jotai：天然支持，只有使用特定 atom 的组件会重渲染
• MobX：通过 observer 自动实现细粒度订阅
• Redux / Zustand：默认整个状态对象更新会触发所有订阅者，但可通过 reselect（Redux）或 shallow 比较（Zustand）优化

// zustand 使用 shallow 避免不必要重渲染
const useName = (state) => state.name;
const Name = () => {
  const name = useStore(useName); // 只在 name 变化时重渲染
  return <div>{name}</div>;
};

// redux 使用 reselect
const selectName = createSelector(
  [state => state.user],
  user => user.name
);

🧪 调试与开发体验

• Redux：拥有最成熟的 DevTools，支持时间旅行、action 日志等
• MobX：提供 mobx-devtools，可追踪依赖关系
• Recoil：有官方 DevTools 扩展
• Jotai / Zustand：依赖 React DevTools，部分调试能力有限
• React Query：提供 DevTools 面板查看缓存、查询状态

🤝 典型组合使用场景

在实际项目中，这些库常组合使用：

• react-query + zustand：用 React Query 管理服务端数据，Zustand 管理客户端 UI 状态
• redux + react-query：大型应用中 Redux 管理复杂客户端状态，React Query 处理 API 数据
• jotai 单独使用：中小型应用中同时处理客户端状态和服务端数据（通过异步 atoms）

// 示例：React Query + Zustand
// 服务端状态
const { data: user } = useQuery({ queryKey: ['user'], queryFn: fetchUser });

// 客户端状态
const darkMode = useStore(state => state.darkMode);

📊 总结：关键特性对比

💡 最终建议

• 如果你需要最强的可预测性和工具链 → 选 redux + react-redux + Redux Toolkit
• 如果你喜欢响应式编程且状态复杂 → 选 mobx-react-lite
• 如果你追求极简且讨厌 Provider → 选 zustand 或 jotai
• 如果你主要处理 API 数据 → 选 react-query，并搭配一个客户端状态库
• 如果你需要原子化状态和高级派生 → 评估 recoil（注意其稳定性）或 jotai
• 避免在新项目中使用 mobx-react → 它已被官方标记为遗留方案

记住：没有“最好”的库，只有“最适合当前项目需求”的工具。理解每种方案的核心理念，才能在架构决策中游刃有余。