react-query
react-query（现已更名为 TanStack Query）和 SWR 一样，都是专注于 远程数据获取、缓存和同步的库，但相比之下，它提供了更强的功能和更复杂的控制能力。
什么是 TanStack Query（原 React Query）
TanStack Query 是一个强大的数据获取库，适用于 React 和其他前端框架，专注于异步状态管理。它简化了远程数据获取、缓存、更新和同步的流程。
核心特性
| 特性 |
描述 |
| 自动缓存和更新 |
请求结果会被缓存，再次访问时优先读取缓存；支持背景更新（revalidation） |
| 查询和变更分离（Query/Mutation） |
查询是获取数据，变更用于 POST/PUT/DELETE 等操作 |
| 自动重试/重取 |
请求失败后自动重试，可配置重试策略 |
| 后台刷新（Refetching） |
支持页面重新聚焦或网络重新连接后自动重新请求 |
| 分页和无限加载支持 |
内建 useInfiniteQuery |
| 强大的 Devtools |
提供直观的开发者工具查看缓存、状态等 |
| 服务端渲染（SSR）支持 |
支持 Next.js 等框架中的服务端数据获取 |
| 依赖查询（Dependent Queries） |
支持一个请求依赖另一个请求的结果 |
TanStack Query vs SWR 对比
具体特性对比
| 特性/维度 |
TanStack Query |
SWR（Stale-While-Revalidate） |
| 作者/组织 |
Tanner Linsley / TanStack |
Vercel 团队（Next.js 作者） |
| API 设计 |
更加结构化（如 useQuery, useMutation） |
更简洁、基于 useSWR(key, fetcher) |
| 缓存机制 |
内建持久化、分页、依赖管理、缓存时间控制 |
更轻量的缓存系统，支持简单配置 |
| 数据变更（POST等） |
明确用 useMutation 管理，配合缓存更新 |
需手动使用 mutate() 触发更新 |
| 错误处理/重试 |
自动重试 + 回退 + 拦截器机制 |
支持基础重试逻辑，但不如 TanStack Query 灵活 |
| 分页/无限加载 |
内建 useInfiniteQuery 等专用钩子 |
支持分页加载（需配合 key 管理），较为原始 |
| DevTools |
✅ 强大直观的浏览器调试工具 |
❌ 没有官方 DevTools |
| 依赖查询 |
✅ enabled 配置项可精细控制执行时机 |
需要手动控制 key 或使用条件判断 |
| 学习曲线 |
相对陡峭，功能多，需要理解 QueryClient 等 |
简洁上手快，更偏向轻量级使用 |
哪个更适合你
| 使用场景 |
推荐库 |
| 项目需要复杂的数据依赖、变更操作、分页等 |
TanStack Query |
| 小型项目/快速原型/只读请求为主 |
SWR |
| 需要优秀的开发者工具、缓存持久化支持 |
TanStack Query |
| 使用 Next.js，偏好轻量和灵活性 |
SWR（与 Next 紧密集成） |
总结
- TanStack Query = 功能强大，适合中大型项目和复杂数据交互需求。
- SWR = 轻量灵活，适合简单的数据获取场景或快速开发。