react状态管理 - 技术栈

React 生态中的状态管理方案非常多，可以按照React 内置状态管理 、轻量级状态管理 、Flux/Redux架构 、原子化状态管理 、服务端状态管理等类别来划分。

1. React 内置状态管理

useState

最基础的状态管理方式。

复制代码

const [count, setCount] = useState(0);

优点

React 官方提供
学习成本低
适合局部状态

缺点

跨组件共享困难
状态复杂时维护困难

适用场景

表单
弹窗开关
按钮状态

useReducer

适合复杂状态逻辑。

复制代码

const reducer = (state, action) => {
  switch(action.type){
    case 'add':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const [state, dispatch] = useReducer(reducer, { count: 0 });

优点

类似 Redux
状态更新逻辑集中

缺点

样板代码较多
仅适合组件内部

适用场景

复杂表单
多状态联动

Context

React 提供的跨组件共享状态方案。

复制代码

const UserContext = createContext();

<UserContext.Provider value={user}>

优点

官方支持
不需要第三方库

缺点

Provider 嵌套地狱
数据变化容易导致大量组件重渲染

适用场景

用户信息
主题切换
国际化

2. Redux 系列

Redux

最经典状态管理库。

复制代码

store
dispatch
action
reducer

数据流：

复制代码

View
 ↓
dispatch
 ↓
action
 ↓
reducer
 ↓
store
 ↓
View

优点

数据流清晰
调试能力强
DevTools 非常优秀

缺点

模板代码多
学习成本高

适用场景

大型项目
多团队协作

Redux Toolkit（RTK）

Redux 官方推荐方案。

复制代码

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

优点

大幅减少模板代码
官方推荐
TypeScript 支持优秀

缺点

本质还是 Redux

当前状态

React 项目中 Redux 基本都使用 RTK。

RTK Query

Redux 官方数据请求方案。

复制代码

const { data } = useGetUsersQuery();

优点

自动缓存
自动刷新
请求状态管理

类似于

React Query
SWR

3. MobX

响应式状态管理。

复制代码

class Store {
  @observable count = 0;

  @action
  increment() {
    this.count++;
  }
}

优点

学习简单
代码量少
自动追踪依赖

缺点

数据流不如 Redux 明确
大型项目容易失控

适用场景

中大型后台系统

4. Zustand（目前最火）

由 pmndrs 开发。

复制代码

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

优点

API 极简
无 Provider
性能优秀
支持 TypeScript

缺点

生态不如 Redux

适用场景

React 中后台
Next.js
React Native

当前趋势

2024-2026 年大量新项目直接使用 Zustand。

5. Recoil

由 Meta 推出。

复制代码

const countState = atom({
  key: 'count',
  default: 0
});

优点

原子化状态管理
React 风格

缺点

更新缓慢
社区活跃度下降

现状

很多项目已转向 Zustand 或 Jotai。

6. Jotai

Recoil 思想的升级版。

复制代码

const countAtom = atom(0);

优点

API 极简
原子化设计
TypeScript 友好

缺点

社区规模小于 Redux

适用场景

中小型项目
Next.js

7. Valtio

Proxy 响应式状态管理。

复制代码

const state = proxy({
  count: 0
});

优点

写法接近 Vue

缺点

社区相对较小

8. XState

状态机管理。

复制代码

const machine = createMachine({
  initial: 'idle',
  states: {
    idle: {},
    loading: {},
    success: {}
  }
});

优点

状态流严格
复杂业务非常强

缺点

学习曲线陡峭

适用场景

工作流系统
审批系统
订单流转

9. Effector

响应式状态管理。

复制代码

const increment = createEvent();
const $counter = createStore(0);

优点

高性能
响应式

缺点

学习资料较少

10. 服务端状态管理

很多时候后端数据不应该放到 Redux。

TanStack Query（React Query）

当前最流行。

复制代码

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: getUsers
});

管理

请求缓存
重试
分页
乐观更新

不管理

UI状态
弹窗状态

SWR

由 Vercel 开发。

复制代码

const { data } = useSWR('/api/user');

优点

简洁
Next.js 友好

各方案对比

方案	难度	性能	TS支持	推荐指数
useState	⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Context	⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
useReducer	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Redux	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
Redux Toolkit	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
MobX	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
Zustand	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Recoil	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐
Jotai	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
Valtio	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
XState	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
React Query	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
SWR	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

2026 年实际项目推荐

如果你是做 React 中后台开发（像你目前做的云性能平台）：

小型项目

复制代码

useState + Context

中型项目（最推荐）

复制代码

Zustand + React Query

大型项目

复制代码

Redux Toolkit + RTK Query

超复杂业务

复制代码

Redux Toolkit + XState

Next.js 项目

复制代码

Zustand + React Query

对于你这种有 7 年前端经验、主要做 React + Ant Design 后台系统的场景，目前最值得深入学习的是：

复制代码

1. Zustand
2. React Query（TanStack Query）
3. Redux Toolkit（RTK）

这三套基本覆盖了当前 React 企业级项目 90% 以上的状态管理需求。