react全局状态、局部状态、服务端状态如何选型在 React 项目中，状态管理可以分为局部状态（Local Stat

在 React 项目中，状态管理可以分为 局部状态（Local State） 、全局状态（Global State） 和 服务端状态（Server State） 。很多项目的问题不是技术选型错误，而是把不同类型的状态放到了错误的位置。

先记住一个原则

能不用全局状态就不用全局状态，能不用状态管理库就不用状态管理库。

1. 局部状态（Local State）

使用：

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

或者：

const [formData, dispatch] = useReducer(reducer, initialState);

适合场景

只在当前组件或少量父子组件使用的数据。

例如：

Modal 是否打开
当前 Tab
表单输入内容
下拉框选项
Loading 状态
分页页码

const [visible, setVisible] = useState(false);

性能最好

因为：

状态变化
 ↓
当前组件重新渲染
 ↓
影响范围最小

你的云鉴性能平台中的例子

性能查询页面：

const [queryForm, setQueryForm] = useState({});
const [loading, setLoading] = useState(false);
const [pagination, setPagination] = useState({});

这些都属于：

✅ 局部状态

不需要 Redux、MobX。

2. 全局状态（Global State）

多个页面、多个组件共享的数据。

例如：

用户信息
权限信息
主题配置
菜单信息
语言配置
消息通知

适合使用 Redux / MobX / Zustand

Redux Toolkit

官方推荐：

npm install @reduxjs/toolkit react-redux

例如：

user
 ├─ userInfo
 ├─ token
 └─ permissions

const userInfo = useSelector(
  state => state.user.userInfo
);

MobX

你前面问过 MobX。

特点：

响应式
代码少
学习成本低

class UserStore {
  userInfo = {};

  constructor() {
    makeAutoObservable(this);
  }
}

Zustand（近几年很火）

const useUserStore = create(set => ({
  userInfo: null,
  setUserInfo: userInfo => set({ userInfo })
}));

使用：

const userInfo = useUserStore(
  state => state.userInfo
);

代码量远少于 Redux。

你的项目哪些应该全局管理？

用户信息

{
  userId,
  username,
  role
}

Token

token

权限

menuList
buttonPermission

主题

dark
light

国际化

zh-CN
en-US

3. 服务端状态（Server State）

很多前端项目最大的问题：

把接口数据塞进 Redux。

例如：

Redux
 └─ performanceList

每次查询：

dispatch(setPerformanceList(data))

其实没必要。

什么是服务端状态？

来自服务器的数据：

用户列表
订单列表
性能报告
问题列表
云厂商列表

本质上：

服务器拥有数据
前端只是缓存

推荐方案：React Query

现在叫：

TanStack Query

官网：

tanstack.com/query

获取数据

const { data, isLoading } = useQuery({
  queryKey: ['performanceList'],
  queryFn: getPerformanceList
});

自动能力

帮你处理：

缓存
重试
Loading
错误处理
数据同步
失效更新
分页
无限滚动

修改数据

const mutation = useMutation({
  mutationFn: createUser
});

4. 如何选型

场景一：当前组件使用

Modal
Tab
Form
Loading

选择：

useState
useReducer

场景二：多个组件共享

用户信息
Token
权限
主题
语言

选择：

Redux Toolkit
Zustand
MobX

场景三：接口返回的数据

性能列表
问题列表
报告详情
云厂商列表

选择：

TanStack Query

不要放 Redux。

现代 React 最佳实践

以前（2018）：

React
+
Redux
+
Thunk

所有东西都塞 Redux。

现在（2026）：

React
+
useState
+
Zustand（全局状态）
+
TanStack Query（服务端状态）

职责清晰：

局部状态
   ↓
useState

全局状态
   ↓
Zustand / Redux

服务端状态
   ↓
TanStack Query

对于你这种后台管理系统、性能平台项目（React + Ant Design + ECharts），比较推荐：

React
+
Zustand
+
TanStack Query
+
Axios

这样的组合比传统的 Redux + Redux Thunk 更轻量，维护成本也更低。