为什么官方推荐 SWR 或 React Query 替代 useEffect 做数据获取？

一、useEffect 的局限性：为什么官方不再推荐？

1. 手动状态管理负担 使用 useEffect 获取数据时，开发者需要手动管理多个状态：
   • 数据加载状态（isLoading）
   • 错误处理（isError）
   • 数据缓存与更新逻辑（如 data 和 prevData 对比）
   • 竞态条件处理（如快速切换页面导致旧请求覆盖新结果） 网页 12 中的示例代码显示，每个请求需编写重复的 useState 和 useEffect 逻辑，导致代码冗长且易出错 。
2. 缺乏自动缓存机制useEffect 无法自动缓存数据，每次组件重新挂载或依赖项变化都会发起新请求。例如，用户切换页面后返回时需重新加载数据，无法复用之前的缓存 。
3. 实时性和性能问题useEffect 无法自动实现后台刷新（如页面焦点切换或网络恢复时重新验证数据），需手动实现轮询或事件监听，增加代码复杂度 。

二、SWR 和 React Query 的核心优势

1. 自动缓存与智能更新
   • SWR（Stale-While-Revalidate）：优先返回缓存数据，后台异步请求最新数据并更新缓存。例如，用户浏览页面时，即使数据过期也能立即展示旧数据，后台静默更新  。
   • React Query：提供细粒度缓存控制，支持基于键的缓存失效、乐观更新和批量请求合并。例如，更新用户信息后自动刷新关联数据 。
2. 简化开发流程
   • 状态统一管理：通过 useSWR 或 useQuery 直接返回 data、error、isLoading 等状态，无需手动维护 。
   • 代码量减少 60%+：对比网页 9 的计数器示例，传统 useEffect 代码 20 行，SWR 仅需 10 行，且无需处理 loading 状态  。
3. 高级功能支持
   • 乐观更新：在请求完成前模拟成功状态（如删除操作立即更新 UI），失败后自动回滚 。
   • 分页与预加载：React Query 的 useInfiniteQuery 支持无限滚动，SWR 的 useSWRInfinite 简化分页逻辑  。
   • 错误自动重试：默认处理请求失败后的重试逻辑，避免手动实现 。

三、SWR 与 React Query 的对比

四、实战案例解析

1. 用户信息展示（SWR 示例）

import useSWR from 'swr';
 
function UserProfile({ userId }) {
  const { data, error } = useSWR(`/api/user/${userId}`, fetcher);
  if (error) return <div>加载失败</div>;
  if (!data) return <div>加载中...</div>;
  return <div>{data.name}</div>;
}
 
 

• 优势：自动处理加载和错误状态，复用缓存避免重复请求  。

2. 分页加载（React Query 示例）

import { useInfiniteQuery } from '@tanstack/react-query';
 
function PostList() {
  const { data, fetchNextPage } = useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam = 1 }) => fetchPosts(pageParam),
    getNextPageParam: (lastPage) => lastPage.nextPage,
  });
// 滚动到底部时调用 fetchNextPage()
}
 
 

• 优势：自动管理分页状态，支持预加载下一页数据 。

五、最佳实践与选型建议

1. 简单项目选 SWR
   • 适合轻量级应用，如博客、个人项目。
   • 优势：零配置、低学习成本 。
2. 复杂项目选 React Query
   • 适合企业级应用，如电商后台、社交平台。
   • 优势：支持离线数据同步、多标签页状态同步 。
3. 与 Next.js 深度整合
   • SWR 支持 Next.js 的 App Router，通过 unstable_serialize 在服务端组件中预取数据 。
   • React Query 可与 Next.js 的 SSR/SSG 结合，提升首屏性能 。

总结

官方推荐 SWR 和 React Query 的核心逻辑是：将开发者从繁琐的状态管理中解放，通过标准化模式提升代码健壮性，同时利用缓存和自动化机制优化性能。对于简单场景，useEffect 仍可使用，但在企业级应用中，专业库能显著降低维护成本并提升用户体验。