SWR 教程

1. 简介

SWR（Stale-While-Revalidate）是一个用于数据获取的 React Hooks 库。它由 Vercel 开发，旨在简化数据获取和缓存的过程。SWR 的核心思想是首先返回缓存中的数据（过期数据），然后发送请求以获取最新数据，并在获取到最新数据后更新 UI。

1.1 为什么使用 SWR？

• 自动重新验证：SWR 会自动重新验证数据，确保 UI 始终显示最新数据。
• 缓存：SWR 使用缓存机制，减少不必要的网络请求。
• 分页和滚动恢复：SWR 支持分页和滚动恢复，提升用户体验。
• 轻量级：SWR 是一个轻量级的库，易于集成和使用。

2. 环境搭建

在开始使用 SWR 之前，确保你已经安装了 Node.js 和 npm。然后，使用 Create React App 创建一个新的 React 项目。

npx create-react-app swr-demo
cd swr-demo
npm install swr

3. 基本使用

3.1 安装 SWR

首先，你需要在你的项目中安装 SWR。

npm install swr

3.2 使用 SWR 获取数据

SWR 提供了一个 useSWR Hook，用于获取数据。以下是一个简单的示例：

import useSWR from 'swr';

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

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>Hello, {data.name}!</div>;
}

在这个示例中，useSWR 接收两个参数：

1. key：一个字符串或函数，用于标识请求的唯一性。
2. fetcher：一个函数，用于实际的数据获取逻辑。

3.3 自定义 Fetcher

你可以自定义 fetcher 函数，例如使用 fetch 或 axios。

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

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

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

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>Hello, {data.name}!</div>;
}

4. 高级特性

4.1 重新验证

SWR 会自动重新验证数据，但你也可以手动触发重新验证。

import useSWR from 'swr';

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

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <div>Hello, {data.name}!</div>
      <button onClick={() => mutate()}>Refresh</button>
    </div>
  );
}

4.2 分页

SWR 支持分页，你可以通过传递参数来获取不同的数据页。

import useSWR from 'swr';

function PaginatedList({ page }) {
  const { data, error } = useSWR(`/api/items?page=${page}`, fetch);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

4.3 全局配置

你可以通过 SWRConfig 组件来配置全局的 SWR 选项。

import useSWR, { SWRConfig } from 'swr';

function App() {
  return (
    <SWRConfig
      value={{
        fetcher: (...args) => fetch(...args).then(res => res.json()),
        refreshInterval: 10000,
      }}
    >
      <Profile />
    </SWRConfig>
  );
}

5. 实践练习

5.1 练习：创建一个简单的用户列表

1. 创建一个 API 端点：在你的后端创建一个简单的 API 端点，返回用户列表。
2. 使用 SWR 获取数据：在前端使用 SWR 获取用户列表，并在页面上显示。
3. 添加分页功能：实现分页功能，允许用户切换不同的页面。

5.2 练习：实现数据重新验证

1. 创建一个按钮：在页面上添加一个按钮，点击按钮时重新验证数据。
2. 使用 mutate：使用 mutate 函数手动触发数据重新验证。

6. 总结

SWR 是一个强大的数据获取库，它简化了数据获取和缓存的过程，并提供了许多有用的特性，如自动重新验证、分页和全局配置。通过本教程，你应该已经掌握了 SWR 的基本使用方法，并能够将其应用到实际项目中。

7. 进一步学习

• SWR 官方文档：https://swr.vercel.app/
• React Query：如果你对数据获取和缓存感兴趣，可以进一步学习 React Query，它提供了类似的功能。
• GraphQL 和 Apollo Client：如果你对 GraphQL 感兴趣，可以学习如何使用 Apollo Client 进行数据获取。

通过不断实践和学习，你将能够更好地掌握 SWR 和其他数据获取技术，提升你的 React 开发技能。