TanStack Query

它管理的不是普通状态

Redux 等状态管理库适合管理客户端状态（主题、侧边栏是否展开、购物车）。但实际项目里大量状态来自服务器：用户列表、文章内容、仪表盘数据——这类「服务端状态」有独特挑战：会过期（服务器数据变了你的缓存还是旧的）、需要异步获取、可能多个组件同时需要。

React Query 的 useQuery 钩子封装了这一切：自动缓存（相同的 queryKey 不重复请求）、后台重新获取（窗口聚焦时自动刷新）、加载/错误状态管理、分页和无限滚动支持。[1]

对代码量的影响

一段典型的「手写数据获取」代码需要：useState 管理 data/loading/error 三个状态、useEffect 发请求、清理函数防内存泄漏、可能还要 useCallback 缓存函数。用 TanStack Query 替换后，整个过程变成 3 行：const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: fetchUsers })。

useMutation 对应写操作（POST/PUT/DELETE），支持乐观更新——在请求返回前就更新 UI，请求失败则回滚，大幅提升交互流畅感。TanStack Query v5（2023 年）统一了各框架适配器的 API，并把体积从 v4 的 ~40KB 优化到 ~30KB。