React|使用 Zustand + TanStack Query 进行状态管理

了解 2025 年 React 状态管理的最佳实践:使用 TanStack Query 管理服务器数据,Zustand 管理客户端状态。

React|使用 Zustand + TanStack Query 进行状态管理

在 2025 年的 React 开发中,状态管理的最佳实践是:

  • TanStack Query:管理服务器数据(API 请求和服务器数据)
  • Zustand:管理客户端状态(UI 状态和客户端数据)

就这么简单。

Redux vs Zustand

Redux 相当于 Swift 的 Combine 框架,而 Zustand 相当于新的 Observation 框架。

两个生态的演进路径相似:

  • Swift:Combine(模板代码多)→ Observation(简洁直观)
  • React:Redux(模板代码多)→ Zustand(简洁直观)

Redux 和 Zustand 都是第三方库,这符合 Node.js 生态的特点。

Context API

React 官方内置了一套状态管理 Hooks,通常被叫做 Context API。包含 useState、useContext 和 useReducer。

Context API 适合简单的中小型项目,但在 2025 年,Zustand 是使用更加广泛,更加符合最佳实践的方案。

TanStack Query

TanStack Query 之前叫做 React Query。