企业官网建设流程全解析

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 友好

各方案对比

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% 以上的状态管理需求。