# SWR / React Query 简介与使用（数据缓存与异步管理）

URL: https://caijiao.org/react/chapter11/data-libs
Source: docs/react/chapter11/data-libs.md
Description: SWR 和 React Query 是现代 React 中非常流行的用于数据缓存和异步请求管理的库。它们简化了数据获取的过程，提供了内置的缓存、轮询、自动刷新等功能，极大地提高了开发效率和用户体验。

SWR（Stale-While-Revalidate）和 React Query 都是用于 React 中的异步数据管理和缓存的库，它们能够帮助开发者以更简单和高效的方式处理数据请求、缓存、同步和错误处理等任务。

## 1. SWR 简介

SWR 是由 Vercel 提供的一个 React 数据获取库，它的名字来源于 "Stale-While-Revalidate" 的策略。这种策略表示在获取数据时，先使用缓存中的旧数据，然后再重新获取数据并更新缓存。

### SWR 的核心特性

- **数据缓存**：自动缓存请求的数据，避免不必要的重复请求。
- **数据重新验证**：通过轮询或定时更新数据，确保数据的及时性。
- **错误重试**：请求失败时自动进行重试。
- **增量更新**：通过实时获取和更新数据，保证用户看到的总是最新的内容。

### 安装 SWR

```bash
npm install swr
````

### 使用示例

```jsx
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function DataFetcher() {
  const { data, error } = useSWR('https://api.example.com/data', fetcher);

  if (error) return <div>请求失败！</div>;
  if (!data) return <div>加载中...</div>;

  return <div>{JSON.stringify(data)}</div>;
}
```

## 2. React Query 简介

React Query 是另一个非常流行的库，它提供了强大的数据缓存、同步、错误处理和分页功能。相比于 SWR，React Query 提供了更多高级功能，适合大型应用的需求。

### React Query 的核心特性

* **自动缓存**：自动缓存并提供缓存过期机制，避免不必要的请求。
* **自动重试与后台刷新**：失败的请求会自动重试，同时支持后台刷新数据。
* **分页与无限滚动支持**：内建支持分页和无限滚动数据加载。
* **请求合并与去重**：多个相同请求会被合并，避免重复请求。

### 安装 React Query

```bash
npm install react-query
```

### 使用示例

```jsx
import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('数据加载失败');
  }
  return response.json();
};

function DataFetcher() {
  const { data, error, isLoading } = useQuery('data', fetchData);

  if (isLoading) return <div>加载中...</div>;
  if (error instanceof Error) return <div>{error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
}
```

## 3. SWR 与 React Query 的对比

| 特性          | SWR           | React Query           |
| ----------- | ------------- | --------------------- |
| 缓存          | 内建缓存          | 内建缓存，并提供缓存过期机制        |
| 自动重试        | 支持自动重试        | 支持自动重试与后台数据刷新         |
| 请求合并        | 不支持           | 支持多个相同请求合并            |
| 错误处理        | 内建简单的错误处理机制   | 提供丰富的错误处理和重试策略        |
| 支持分页与无限滚动   | 不支持           | 支持分页、无限滚动数据加载         |
| 数据重新验证与后台刷新 | 支持数据过期后自动重新验证 | 支持后台数据刷新，并允许自定义请求刷新频率 |

## 4. 总结

* **SWR**：适合简单、轻量级的应用，能够快速集成并管理数据的获取、缓存和刷新。
* **React Query**：适合大型应用，提供了更多的功能，如分页、无限滚动、请求去重等。其强大的功能集使得它在复杂的前端应用中尤为有用。

根据你的应用规模和需求，选择适合的库来简化数据请求和状态管理。