丰金网络 做网站营销策划的八个步骤

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 = 轻量灵活，适合简单的数据获取场景或快速开发。