axios-hooks vs react-query vs swr: 架构、缓存与工程化对比

在 React 开发生态中，管理服务端数据一直是个核心挑战。axios-hooks、react-query 和 swr 都试图解决这个问题，但它们的设计哲学和适用场景截然不同。axios-hooks 更像是一个请求库的包装器，而 react-query 和 swr 则是完整的异步状态管理器。让我们从实际工程角度深入对比。

🎯 核心 API 设计：请求封装 vs 状态管理

axios-hooks 直接绑定 Axios 配置，返回请求状态。

• API 紧密耦合 Axios 实例。
• 适合只需要发送请求并获取加载/错误状态的场景。

// axios-hooks: 绑定 Axios 配置
import useAxios from 'axios-hooks';

function UserProfile() {
  const { data, loading, error } = useAxios('/users/123');
  if (loading) return <div>加载中...</div>;
  return <div>{data.name}</div>;
}

react-query 使用唯一的查询键（Query Key）来管理状态。

• 解耦了请求库（可以用 fetch 或 axios）。
• 通过键来缓存和更新数据。

// react-query: 使用查询键
import { useQuery } from '@tanstack/react-query';

function UserProfile() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', 123],
    queryFn: () => fetch('/users/123').then(res => res.json())
  });
  if (isLoading) return <div>加载中...</div>;
  return <div>{data.name}</div>;
}

swr 使用 URL 或键作为缓存标识，强调简洁。

• API 极其精简，默认行为智能。
• 适合快速编写数据获取逻辑。

// swr: 使用键或 URL
import useSWR from 'swr';

function UserProfile() {
  const { data, isLoading, error } = useSWR('/users/123', fetcher);
  if (isLoading) return <div>加载中...</div>;
  return <div>{data.name}</div>;
}

🔄 缓存与重新验证策略

axios-hooks 默认不处理缓存。

• 每次组件挂载或依赖变化都会重新请求。
• 需要手动实现缓存逻辑或配合其他工具。

// axios-hooks: 无内置缓存
// 每次渲染都会触发新请求，除非手动配置缓存实例
const { data } = useAxios('/users/123'); 

react-query 提供精细的缓存控制。

• 支持 staleTime（数据保鲜期）和 cacheTime（缓存存活期）。
• 支持窗口聚焦时自动重新验证。

// react-query: 精细缓存控制
useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  staleTime: 1000 * 60 * 5, // 5 分钟内数据视为新鲜
  refetchOnWindowFocus: true // 窗口聚焦时重新验证
});

swr 主打 Stale-While-Revalidate 策略。

• 立即返回旧数据，同时在后台重新验证。
• 配置简单，默认行为适合大多数 Web 场景。

// swr: 自动后台重新验证
useSWR('/users', fetcher, {
  revalidateOnFocus: true, // 默认开启
  dedupingInterval: 2000   // 2 秒内重复请求去重
});

✍️ 数据突变（Mutation）处理

axios-hooks 通常手动处理突变。

• 没有专门的 Mutation Hook。
• 开发者需手动管理加载状态和错误。

// axios-hooks: 手动管理突变
const updateUser = async (id, data) => {
  setLoading(true);
  try {
    await axios.put(`/users/${id}`, data);
  } catch (err) {
    setError(err);
  } finally {
    setLoading(false);
  }
};

react-query 提供专用的 useMutation。

• 自动管理加载、错误和成功状态。
• 支持突变后自动使查询失效（invalidate）。

// react-query: 专用 Mutation Hook
const mutation = useMutation({
  mutationFn: updateUser,
  onSuccess: () => {
    queryClient.invalidateQueries(['users']); // 自动更新列表
  }
});

swr 提供 mutate 函数。

• 可以全局调用或绑定到特定键。
• 支持乐观更新（Optimistic UI）。

// swr: 使用 mutate 函数
import useSWR, { mutate } from 'swr';

const handleUpdate = async (data) => {
  mutate('/users', updateUser(data), { 
    optimisticData: { ...oldData, ...data } 
  });
};

🛠️ 维护状态与生态系统

axios-hooks 维护频率较低。

• 社区规模较小，插件和扩展有限。
• 适合特定场景，但长期维护风险较高。

// axios-hooks: 社区资源较少
// 遇到问题可能需要自己阅读源码解决

react-query 由 TanStack 维护，非常活跃。

• 拥有强大的 DevTools 浏览器插件。
• 文档完善，社区解决方案丰富。

// react-query: 强大的 DevTools
// 可在浏览器中直观查看缓存状态和查询详情
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

swr 由 Vercel 维护，稳定可靠。

• 与 Next.js 集成良好。
• 轻量级，依赖少。

// swr: 与 Next.js 无缝集成
// 特别适合部署在 Vercel 平台的项目

📊 核心特性对比表

💡 架构师建议

axios-hooks 就像一把专用螺丝刀 🪛 — 如果你只需要拧 Axios 这一种螺丝，它很简单。但在现代复杂应用中，它缺乏管理数据生命周期的能力。仅建议在维护旧项目或极简单的内部工具中使用。

react-query 就像一套完整的工程机床 🏭 — 功能强大，可控制每一个细节。适合需要高度可靠性、复杂缓存策略和团队协作的大型应用。它是目前企业级 React 开发的事实标准。

swr 就像一把瑞士军刀 🇨🇭 — 轻便、够用、开箱即用。适合初创项目、内容型网站或希望减少配置负担的团队。如果你已经在用 Next.js，它通常是默认选择。

最终建议：对于大多数新启动的专业前端项目，优先选择 react-query 以获得长期的可维护性和功能扩展性。如果项目极度追求轻量且逻辑简单，swr 是优秀的备选。尽量避免在新架构中依赖 axios-hooks，除非你有非常特殊的 Axios 绑定需求。