React Query与SWR

React Query 和 SWR 是两个广泛使用的用于数据获取和缓存的库。它们都简化了在 React 应用中进行数据获取的流程，并自动处理缓存、请求重试等常见任务。虽然它们有相似的功能，但在设计理念、用法和功能上略有不同。

本章将介绍 React Query 和 SWR 的基本用法，并对比它们的优缺点。

1. React Query简介

React Query 是一个强大的数据获取库，提供了丰富的 API 用于处理服务器端数据的获取、缓存、同步、分页等。它自动缓存和同步请求，避免了手动管理数据的复杂性。React Query 适用于需要处理复杂数据请求的场景。

1.1 安装 React Query

npm install react-query

1.2 使用 React Query 获取数据 使用 useQuery Hook 获取数据是 React Query 的核心功能。useQuery 自动处理缓存和重试请求。

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) throw new Error('Network response was not ok');
  return response.json();
};

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

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

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

1.3 使用 useMutation 发送数据 useMutation 是 React Query 中用于发送数据（如 POST、PUT、DELETE 请求）的 Hook。

import { useMutation } from 'react-query';

const createData = async (newData) => {
  const response = await fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newData),
  });
  if (!response.ok) throw new Error('Error creating data');
  return response.json();
};

function App() {
  const mutation = useMutation(createData);

  const handleSubmit = () => {
    mutation.mutate({ name: 'John', age: 30 });
  };

  return (
    <div>
      <button onClick={handleSubmit}>Create Data</button>
      {mutation.isLoading && <p>Creating...</p>}
      {mutation.isError && <p>Error: {mutation.error.message}</p>}
      {mutation.isSuccess && <p>Data created successfully</p>}
    </div>
  );
}

1.4 React Query的优缺点 优点： 自动缓存：自动缓存请求数据，避免重复请求，提高性能。 自动同步：数据在后台更新后自动同步，保持 UI 最新。 支持分页和无限滚动：内置支持分页和无限滚动的处理。 请求重试：内置请求重试机制，当请求失败时会自动重试。 缺点： 较大：React Query 的功能非常丰富，但也使得库的体积相对较大。 学习曲线：对于初学者，可能需要时间来理解各种缓存策略和 API 使用方法。 2. SWR简介 SWR 是由 Vercel 提供的一个 React 数据获取库，名字来源于 "Stale-While-Revalidate" 的缩写，意味着“过时即用，重新验证”。SWR 的设计目标是简化数据获取和缓存，提供非常简单的 API 和内置缓存机制，适用于大多数前端数据获取的场景。

2.1 安装 SWR

npm install swr

2.2 使用 SWR 获取数据 SWR 通过 useSWR Hook 来获取数据，简化了请求过程，自动处理缓存、重新验证等。

import useSWR from 'swr';

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

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

  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;

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

2.3 SWR的优缺点 优点： 简洁的 API：useSWR 的 API 非常简单，几行代码即可实现数据获取和缓存。 自动缓存：自动缓存数据，避免重复请求，提升性能。 自动重新验证：数据会在后台重新验证，保持数据的最新状态。 增量更新：支持增量更新，即数据变化时会自动更新 UI。 缺点： 功能较少：相比 React Query，SWR 提供的功能较少，不支持复杂的场景如分页、无限滚动、请求重试等。 需要配合自定义函数：需要自己提供数据获取的 fetcher 函数，可能不如 React Query 灵活。

3. React Query与SWR对比

特性React QuerySWR
安装npm install react-querynpm install swr
缓存机制自动缓存，支持缓存策略自动缓存，简单的缓存机制
数据更新支持后台更新、重新验证、增量更新自动重新验证，保持数据的最新状态
请求重试支持请求重试不支持内建的请求重试机制
请求方式useQuery（GET请求）、useMutation（POST/PUT等请求）useSWR（GET请求）
支持分页和无限滚动支持分页和无限滚动useSWR（GET请求）
功能更加丰富，适合复杂场景简单，适合大多数基本数据获取场景
开发者体验相对较复杂，需要理解更多配置和概念简洁、易用，但功能上较为有限
  1. 总结 React Query 是一个功能丰富的库，适用于需要复杂缓存、数据同步、分页和请求重试的场景。它的 API 和功能较为复杂，适合大型应用。

SWR 是一个轻量级、易用的数据获取库，适用于简单的数据获取需求。它提供了简洁的 API 和自动缓存机制，适合快速开发和中小型项目。

选择哪一个库取决于你的项目需求：

如果你需要处理复杂的请求、缓存策略、后台数据同步等，React Query 更适合。 如果你只需要一个简单、高效的数据获取解决方案，SWR 是一个不错的选择。
Last Updated::