25. 状态管理生态

状态管理的层次

React 状态管理从轻到重：

useState/useReducer（组件内）
    ↓ 跨组件
Context（内置方案）
    ↓ 复杂应用
Zustand / Jotai / Recoil（轻量库）
    ↓ 大型应用
Redux Toolkit（重量级）

什么时候需要外部状态管理

你的代码如果出现这些信号，就该考虑外部库了：

• 多个不相关的组件共享同一份状态
• Context 导致大量不必要的重渲染
• 状态逻辑复杂，reducer 文件超过 200 行
• 需要时间旅行调试、持久化、中间件

Zustand 入门

Zustand 是目前最流行的轻量状态管理库。API 极简，打包后约 1KB。

npm install zustand

import { create } from 'zustand';

const useStore = create((set) => ({
  // 状态
  count: 0,
  user: null,

  // 动作
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  setUser: (user) => set({ user }),
  reset: () => set({ count: 0, user: null })
}));

在组件里直接用：

function Counter() {
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);

  return <button onClick={increment}>{count}</button>;
}

function UserInfo() {
  const user = useStore(state => state.user);
  const setUser = useStore(state => state.setUser);

  return (
    <div>
      {user ? user.name : '未登录'}
      <button onClick={() => setUser({ name: '张三' })}>登录</button>
    </div>
  );
}

Zustand vs Context

	Context	Zustand
引入方式	内置	需安装
重渲染	所有消费者都重渲染	只重渲染订阅者
代码量	Provider + Consumer	一个 hook
调试工具	无	Redux DevTools
中间件	无	内置持久化、immer 等

Redux Toolkit 简介

Redux 是老牌状态管理库，Redux Toolkit 是官方推荐的现代写法：

import { configureStore, createSlice } from '@reduxjs/toolkit';

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

const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

Redux 适合大型团队、复杂业务。小项目用 Zustand 更省心。

其他方案一览

库	特点	适用场景
Zustand	极简、无 Provider	中小型项目首选
Jotai	原子化状态	细粒度订阅
Recoil	Facebook 出品	实验性，生态一般
Redux Toolkit	功能最全	大型项目、团队协作
MobX	响应式	面向对象风格

选择建议

组件内状态 → useState / useReducer
跨 2-3 层 → Context
跨多层 + 频繁更新 → Zustand
大型应用 + 复杂业务 → Redux Toolkit

本节要点

• 状态管理从轻到重：useState → Context → Zustand → Redux
• Zustand API 极简，是中小型项目首选
• 不要过早引入外部库
• 根据项目规模和团队情况选择