菜鸟教程
教程 react tutorial

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

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：适合大型应用，提供了更多的功能，如分页、无限滚动、请求去重等。其强大的功能集使得它在复杂的前端应用中尤为有用。

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

相关内容