【React】SWR 和 React Query(TanStack Query)

它们都是目前非常流行的 React 生态中用于 服务端数据获取和缓存管理 的库。

客户端状态 vs 服务端状态

客户端状态（浏览器内存）：

UI 状态控制，表单输入、开关切换、弹窗显隐
主题偏好
未提交的用户数据

服务端状态（数据库异步获取）：

客户端拥有的是其"快照"或者"缓存"

手动管理服务端状态的挑战：

样板代码：useState(data,loading,error),useEffect(fetch)
缓存管理：如何避免重复请求？数据何时过期？
后台同步：数据在后台被修改了怎么办？
乐观更新：提升用户体验，但实现复杂（先显示UI，再调用接口修改数据）
分页与无限滚动：数据聚合与状态管理复杂
竞争条件：多次快速请求导致的数据不一致
焦点重新获取：窗口切换回来时数据是否需要刷新？

而使用 swr / tanstack query 可以很好的解决上述问题。

📦 一句话简介

库	简介
SWR	由 Vercel 团队开发，采用"缓存优先 + 数据同步"的策略，极简 API，适合 REST 接口场景。
React Query（TanStack Query）	功能更全面、灵活度更高的异步状态管理工具，适合中大型应用，支持 REST/GraphQL。

🔧 核心能力对比

能力	SWR	React Query
数据缓存	✅ 自动缓存、共享	✅ 自动缓存、共享、时间控制更细
请求状态管理	✅ 提供 `isLoading`, `error` 等状态	✅ 更丰富，如 `isFetching`, `isSuccess` 等
自动重新验证（revalidate）	✅ 默认启用（焦点恢复、网络恢复）	✅ 可配置（焦点、窗口切换、间隔轮询）
Mutation 支持	⚠️ 需要自己手写请求逻辑	✅ 内建 `useMutation`
查询依赖（Query key）	⚠️ 依赖 key 手动拼接控制	✅ Query Key 和依赖自动管理
类型推导（TS）	✅ 简单支持	✅ 类型体系强大
DevTools	❌ 无官方工具	✅ 有官方 DevTools
SSR 支持	✅ 支持	✅ 支持，且整合 Next.js 更完善
配置复杂度	✅ 极简配置	⚠️ 稍复杂，功能全面需要更多代码
状态持久化	❌ 不支持	✅ 支持（如 localStorage、hydration）

🧪 示例对比

✅ SWR 示例

tsx 复制代码

import useSWR from 'swr';
import axios from 'axios';

const fetcher = url => axios.get(url).then(res => res.data);

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了</div>;

  return <div>用户名: {data.name}</div>;
}

✅ React Query 示例

tsx 复制代码

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

function Profile() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user'],
    queryFn: () => axios.get('/api/user').then(res => res.data),
  });

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了</div>;

  return <div>用户名: {data.name}</div>;
}

🧠 使用建议（选型指南）

使用场景	推荐
小项目、Next.js 项目、只需 GET 请求	✅ SWR
中大型项目、需要缓存策略控制、mutation、多状态	✅ React Query
REST 或 GraphQL 请求管理统一、支持分页、懒加载等复杂逻辑	✅ React Query
想用最少代码获取远程数据	✅ SWR

🧩 总结

特点	SWR	React Query
关键词	简洁、极致缓存、自动更新	全能、丰富配置、请求控制强大
适合人群	追求极简代码的开发者	构建复杂数据流、可控性的项目