react全局状态、局部状态、服务端状态如何选型

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

先记住一个原则

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

1. 局部状态（Local State）

使用：

scss 复制代码

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

或者：

scss 复制代码

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

适合场景

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

例如：

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

scss 复制代码

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

性能最好

因为：

复制代码

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

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

性能查询页面：

scss 复制代码

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

这些都属于：

✅ 局部状态

不需要 Redux、MobX。

2. 全局状态（Global State）

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

例如：

复制代码

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

适合使用 Redux / MobX / Zustand

Redux Toolkit

官方推荐：

bash 复制代码

npm install @reduxjs/toolkit react-redux

例如：

sql 复制代码

user
 ├─ userInfo
 ├─ token
 └─ permissions

ini 复制代码

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

MobX

你前面问过 MobX。

特点：

复制代码

响应式
代码少
学习成本低

kotlin 复制代码

class UserStore {
  userInfo = {};

  constructor() {
    makeAutoObservable(this);
  }
}

Zustand（近几年很火）

dart 复制代码

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

使用：

ini 复制代码

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

每次查询：

scss 复制代码

dispatch(setPerformanceList(data))

其实没必要。

什么是服务端状态？

来自服务器的数据：

复制代码

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

本质上：

复制代码

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

推荐方案：React Query

现在叫：

TanStack Query

官网：

tanstack.com/query

获取数据

php 复制代码

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

自动能力

帮你处理：

复制代码

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

修改数据

ini 复制代码

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

4. 如何选型

场景一：当前组件使用

css 复制代码

Modal
Tab
Form
Loading

选择：

复制代码

useState
useReducer

场景二：多个组件共享

复制代码

用户信息
Token
权限
主题
语言

选择：

复制代码

Redux Toolkit
Zustand
MobX

场景三：接口返回的数据

复制代码

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

选择：

复制代码

TanStack Query

不要放 Redux。

现代 React 最佳实践

以前（2018）：

diff 复制代码

React
+
Redux
+
Thunk

所有东西都塞 Redux。

现在（2026）：

diff 复制代码

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

职责清晰：

复制代码

局部状态
   ↓
useState

全局状态
   ↓
Zustand / Redux

服务端状态
   ↓
TanStack Query

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

diff 复制代码

React
+
Zustand
+
TanStack Query
+
Axios

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