高级

梗概

SWR 是由 Vercel 开发的 React 数据请求库，名字来源于 “Stale-While-Revalidate”（过期数据优先，同时后台验证更新）的缓存策略。它通过高效处理数据请求、自动缓存、智能重新验证，让数据获取更简单且性能更优。

核心特性

自动缓存与重新验证：首次请求后缓存数据，下次访问直接用缓存，同时后台默默重新请求更新数据，保证数据新鲜度
聚焦重新验证：页面从后台切回时，自动重新请求数据，确保用户看到最新内容
错误重试：请求失败时自动重试，可配置重试次数和间隔
依赖请求：支持基于其他数据的动态请求（如根据 ID 加载详情）
React Suspense 支持：可配合 React Suspense 实现优雅的加载状态管理

基本使用

安装

npm install swr
# 或
yarn add swr

基础用法

import useSWR from 'swr';
 
// 定义数据请求函数（通常是 fetch/axios 等）
const fetcher = (url) => fetch(url).then(res => res.json());
 
function UserProfile({ userId }) {
  // 使用 useSWR hook 请求数据，key 为请求标识（通常是 URL）
  const { data, error, isLoading, mutate } = useSWR(
    `/api/users/${userId}`, // 请求 key（变化时会重新请求）
    fetcher // 数据获取函数
  );
 
  // 加载状态
  if (isLoading) return <div>Loading...</div>;
  // 错误状态
  if (error) return <div>Failed to load</div>;
  // 数据渲染
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
      {/* 手动触发重新请求 */}
      <button onClick={() => mutate()}>刷新数据</button>
    </div>
  );
}

API 参数与返回值

参数

key：请求的唯一标识（字符串或数组，数组中任意元素变化会触发重新请求）
fetcher：数据获取函数（接收 key 作为参数，返回 Promise）
options（可选）：配置项，如：
- revalidateOnFocus：是否在页面聚焦时重新验证（默认 true）
- retry：重试次数（默认 3 次）
- dedupingInterval：相同 key 的请求防抖时间（默认 2000ms）

返回值

data：请求成功的数据（初始为 undefined）
error：请求失败的错误信息（初始为 undefined）
isLoading：是否处于加载中（data 和 error 都为 undefined 时为 true）
mutate：手动更新数据或重新请求的函数（支持传入新数据直接更新缓存）

与其他方案对比

SWR 与 React Query 都是优秀的数据请求库：

SWR：轻量、API 简洁，适合简单场景，与 Next.js 配合友好
React Query：功能更强大，支持复杂查询逻辑、批量操作等，适合大型项目

相比传统的 HTTP缓存，SWR 等客户端数据管理库解决了动态数据的缓存同步、状态管理、主动控制等问题，更适配现代前端的复杂交互场景。

适用场景

需要高效缓存和自动更新的数据请求（如列表、详情页）
依赖用户交互或其他状态动态变化的请求
希望简化加载/错误状态管理的场景

SWR 通过优化缓存策略和请求时机，能有效减少不必要的网络请求，提升用户体验，是 React 项目中处理数据请求的优秀选择。

🪴qql1's digital garden

探索

SWR数据请求库

梗概