文章目录
- react-query
- 什么是 TanStack Query（原 React Query）
- 核心特性
- TanStack Query vs SWR 对比
-
- 总结
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 = 轻量灵活，适合简单的数据获取场景或快速开发。
