缓存冲突：SWR vs. TanStack Query for React

大多数 React 应用程序与远程数据源通信以保存和检索数据记录。 现在的 Web 应用程序开发团队倾向于使用 REST 和类似 GraphQL 的通信模式来实现他们的远程数据源接口。 然后，前端开发团队必须通过他们的 React 应用程序向各种库发出网络请求，以在客户端和服务器端之间同步数据。

对于与 RESTful 服务进行通信，最简单的方法是使用组件中 内置的 Fetch API 或类似 Axios 的库 来挂载类状态事件。 然后，您必须编写额外的逻辑来实现加载状态 UI 增强功能。 最后，为了通过数据缓存、去重 API 查询和预取使您的应用程序更加用户友好和优化，您可能需要编写比客户端业务逻辑更多的代码！

这就是 SWR 和 TanStack Query（以前称为 React Query）等库可以帮助您通过缓存、预取、查询重复数据删除和各种其他可用性功能将数据源的状态与 React 应用程序的状态同步的地方。

在本文中，我将通过一个实际的示例项目来比较 SWR 和 TanStack Query 库的特性。 以下是我们将介绍的内容：

• 什么是反应 SWR？

• 使用反应 SWR

  • 安装包

  • 实现数据获取器和自定义 Hook

  • 使用 SWR 获取数据

  • 改变缓存的数据并使请求无效

• 什么是 TanStack 查询？

• 使用 TanStack 查询

  • 安装包

  • 实现数据获取器和自定义 Hook

  • 使用 TanStack Query 获取数据

  • 改变缓存的数据并使请求无效

• SWR 与 TanStack 查询：

  • 基本的 CRUD 功能

  • 人气和开发者支持

  • 开发者工具

  • 内置可用性功能

  • 捆绑包大小和性能优化

• SWR 与 TanStack 查询：总结

什么是反应 SWR？

SWR 是一个开源的、轻量级的、支持 TypeScript 的库，它提供了几个 Hooks 用于在 React 中通过缓存获取数据。 缩写“SWR”代表 State While Re-validate，这是一种来自 HTTP RFC 5861 的通用缓存原则。

React SWR 于 2019 年通过其 v0.1.2 公开版本首次发布。

突出特点

该库提供以下突出显示的功能：

特征	描述
轻巧的尺寸和高性能	根据 BundlePhobia ，压缩后 SWR 库的重量约为 4.2 KB。 SWR 开发团队专注于性能和轻量级，采用 tree-shaking 捆绑策略
最小的、可配置的和可重用的 API	SWR 还专注于为 React 开发人员提供一个最小的、开发人员友好的 API，提供性能友好的特性。 你可以用一个 Hook 实现大部分你需要的东西， useSWR. 尽管 API 很小，但它允许您使用全局配置和许多 Hook 选项来调整缓存系统和行为。
面向开发人员和用户的内置功能	SWR 支持分页请求并提供 useSWRInfiniteHook 实现无限加载。 它还可以与 React Suspense API、SSG 和 SSR 一起使用，并提供预取、焦点重新验证和网络状态重新获取，例如为应用程序用户增强可用性。

使用反应 SWR

现在我们已经大致了解了 SWR 在 React 中优化数据获取的功能，让我们使用 SWR 创建一个示例应用程序并对其进行评估，以使用 TanStack Query 找到比较点。

我们可以在客户端使用延迟承诺模拟我们的 API 后端来尝试 SWR，但这种方法并不能提供真正的数据获取体验。 让我们用 Node.js 创建一个简单的 RESTful API。 我们可以在几秒钟内创建一个 RESTful API 服务器 json-server包 。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

首先，安装 json-server全局打包：

npm install -g json-server
# --- or ---
yarn global add json-server

接下来，将以下内容添加到一个名为的新文件中 db.json:

{
  "products": [
    {
      "id": 1,
      "name": "ProX Watch",
      "price": 20
    },
    {
      "id": 2,
      "name": "Magic Pencil",
      "price": 2
    },
    {
      "id": 3,
      "name": "RevPro Wallet",
      "price": 15
    },
    {
      "id": 4,
      "name": "Rice Cooker",
      "price": 25
    },
    {
      "id": 5,
      "name": "CookToday Oven",
      "price": 10
    }
  ]
}

接下来，运行以下命令以启动基于 RESTful CRUD 服务器 db.json文件：

json-server --watch --port=5000 --delay=1000 db.json

现在，我们可以通过以下方式访问我们的 CRUD API http://localhost:5000/products. 如果需要，您可以使用 Postman 对其进行测试。 在我们的示例中，我们添加了 1000 毫秒的延迟来模拟网络延迟。

让我们创建一个新的 React 应用程序并通过 SWR 获取数据。 如果您已经是 SWR 用户或者您之前已经尝试过 SWR，您可以在 这个 GitHub 存储库 中查看完整的项目，然后 继续 下面的 TanStack 查询部分。

像往常一样创建一个新的 React 应用程序：

npx create-react-app react-swr-example
cd react-swr-example

安装包

接下来，安装 swr使用以下命令打包：

npm install swr
# --- or ---
yarn add swr

我们将在本教程中使用 Axios，因此也使用以下命令安装它。 您可以使用任何 HTTP 请求库或内置的 fetch，因为 SWR 期望的只是承诺。

---

来自 LogRocket 的更多精彩文章：

• 不要错过 The Replay 来自 LogRocket 的精选时事通讯

• 了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

• 使用 React 的 useEffect 优化应用程序的性能

• 之间切换 在多个 Node 版本

• 了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri ，一个用于构建二进制文件的新框架

• 比较 NestJS 与 Express.js

---

npm install axios
# --- or --- 
yarn add axios

实现数据获取器和自定义 Hook

我们将通过创建一个简单的产品管理应用程序来评估 SWR，该应用程序列出了一些产品并允许您添加新产品。 首先，我们需要将本地模拟 API 的基本 URL 存储在 .env文件。 创建一个名为的新文件 .env并添加以下内容：

REACT_APP_API_BASE_URL = "http://localhost:5000"

接下来，使用 Axios 全局配置中的基本 URL，将以下内容添加到 index.js文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import axios from 'axios';
​
import './index.css';
import App from './App';
​
axios.defaults.baseURL = process.env.REACT_APP_API_BASE_URL;
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
);

我们将所有应用程序组件保存在我们的 App.js文件以保持教程的简单性。 清洁你的一切 App.js文件并添加以下导入：

import React, { useState } from 'react';
import useSWR from 'swr';
import axios from 'axios';

import './App.css';

在这里，我们导入 useSWR钩自 swr来检索缓存的数据记录，而不是直接调用 Axios 函数。

为了获取没有 RESTful URL 参数的数据，我们通常需要向 useSWRHook：一个唯一键（通常是 URL）和一个 fetcher 函数，它是一个返回异步数据的 JavaScript 函数。

添加以下包含 fetcher 的代码：

function fetcher(url) {
  return axios.get(url).then(res => res.data);
}

async function addProduct(product) {
  let response = await axios.post('/products', product);
  return response.data;
}

在这里， fetcher函数通过 Axios 异步返回数据， addProduct函数同样发布产品数据并返回新创建的产品。

现在，我们可以使用 useSWR(‘/products’, fetcher)在功能组件中声明以获取缓存的产品，但 SWR 开发人员建议使用可重用的自定义 Hook。 将以下 Hook 添加到 App.js文件：

function useProducts() {
  const { data, error, mutate } = useSWR('/products', fetcher);
  return {
    products: data,
    isLoading: !data,
    isError: !!error,
    mutate
  };
}

我们的 useProducts自定义 Hook 输出以下道具：

• products: 从 API 获取数据后的产品数组； 它成为了 undefined如果 API 中没有可用数据

• isLoading: 基于 API 数据的加载指标

• isError: 表示加载错误的布尔值

• mutate：即时更新反映在 UI 上的缓存数据的功能

使用 SWR 获取数据

现在我们可以使用 useProducts用于从后端数据更新 UI 的数据挂钩。 创建 Products列出所有可用产品的组件：

function Products() {
  const { products, isLoading, isError } = useProducts();
  if(isError)
    return (
      
Unable to fetch products.
    );

  if(isLoading)
    return (
      
Loading products...
    );

  return (
    products.map((product) => (
      

        
{product.name}
        
${product.price}
      
    ))
  );
}

这 Products组件根据 useProducts挂钩道具。 如果你在多个组件中多次使用这个 Hook，SWR 将只发起一个 HTTP 请求，根据请求重复数据删除功能，然后，获取的数据将通过渲染过程与所有组件共享 useProducts钩。

改变缓存的数据并使请求无效

创建一个名为 AddProduct并使用以下代码实现一种添加新产品的方法：

function AddProduct({ goToList }) {
  const { products, mutate } = useProducts();
  const [product, setProduct] = useState({
    id: products.length + 1,
    name: '',
    price: null
  });
  const [disabled, setDisabled] = useState(true);

  async function handleAdd() {
    goToList();
    mutate(async () => {
      return [...products, await addProduct(product)]
    }, { optimisticData: [...products, product], rollbackOnError: true, revalidate: false } );
  }

  function handleFieldUpdate(e) {
    const element = e.target;
    const value = element.type === 'number' ? parseInt(element.value) : element.value;
    const nextProduct = {...product, [element.name]: value};

    setProduct(nextProduct);
    setDisabled(!nextProduct.name || !nextProduct.price);
  }

  return(
    

      
      
      Add
    
  );
}

阅读 mutate仔细调用函数：

mutate(async () => {
  return [...products, await addProduct(product)]
}, {
    optimisticData: [...products, product],
    rollbackOnError: true,
    revalidate: false
    }
);

在这里，我们要求 SWR 直接使用 optimisticData选项; 然后，我们可以使用 addProduct函数调用将指定元素插入数据库。 我们还可以从 async 函数返回更新的产品列表，因为我们的 SWR 突变期望从 async 函数的返回值中更新数据记录。

作为最后一步，添加导出的 App组件并完成实现：

function App() {
  const [ mode, setMode ] = useState('list');
  return (
    <>
    

      
 { setMode('list') }}
          className={mode === 'list' ? 'selected' : ''}>All products
      
 { setMode('add') }}
          className={mode === 'add' ? 'selected' : ''}>Add product
    
    

      { mode === 'list' ?  :
           setMode('list')}/> }
    
    
  );
}

export default App;

现在运行应用程序：

npm start
# --- or --- 
yarn start

首先，研究 SWR 如何缓存 ProductList组件的数据——你只会看到一次加载文本。 稍后，您将收到缓存的内容。

看下面的预览：

使用 SWR 缓存产品列表数据

接下来，请注意 SWR 如何通过在后台更新和重新获取数据之前直接操作呈现的内容来提高可用性 AddProduct零件。 添加一个新产品，看到数据记录立即渲染出来，如下图：

在 API 调用之前更新缓存的内容

最后，SWR 带有一些附加功能，例如重新验证焦点并检查网络选项卡以查看网络调用：

测试焦点重新验证功能

什么是 TanStack 查询？

TanStack Query 是另一个开源、功能齐全、支持 TypeScript 的库，它为 React 应用程序中的数据获取和缓存提供了一个 API。 中实现了库的不可知核心逻辑， 它在一个单独的内部包 并专门为 React 提供了 React Query 适配器包。

TanStack Query for React 提供 Hooks、类和官方的、基于 GUI 的专用开发工具，用于在 React 应用程序中同步客户端状态和服务器状态。 同样，开发团队计划为其他前端库提供官方适配器包，即 TanStack Vue Query、Svelte Query 等。

TanStack Query 于 2014 年通过其 v0.0.6 公开版本首次发布 ，大约在 React 首次发布一年后。

突出特点

该库提供以下突出显示的功能：

特征	描述
包括电池，类似框架的体验	TanStack Query 为 React 开发人员提供了类似框架的体验，具有专用的开发人员工具、用于每个特定任务的专用 Hook、用于更好地组织代码的 OOP 类以及基于 JavaScript-props 的事件处理程序。
详细、可配置和可重用的 API	TanStack Query 致力于提供一个详细的、可配置的、功能齐全的 API，用于在 React 应用程序中获取和缓存远程数据。 它提供了来自其 API 核心的多个钩子和类，以实现更好的代码组织。
面向开发人员和用户的内置功能	TanStack Query 支持分页请求并提供 useInfiniteQueryHook 实现无限加载。 它还为开发人员提供了 React Suspense API、SSG 和 SSR 支持——预取、焦点重新验证和网络状态重新获取，如应用程序用户的可用性增强。

使用 TanStack 查询

现在我们已经回顾了 TanStack Query 为在 React 中优化数据获取提供的功能，让我们创建一个示例应用程序并对其进行评估，以找出与 React SWR 的比较点。

如果您已经是 TanStack Query 用户或者您之前已经尝试过 TanStack Query，您可以在 这个 GitHub 存储库 中查看完整的项目并跳到比较部分。

首先，配置模拟 API 服务器并像我们在 React SWR 部分中所做的那样启动它。 现在，创建另一个 React 项目以使用 TanStack Query 实现之前的简单产品管理应用程序：

npx create-react-app tanstack-query-example
cd tanstack-query-example

安装包

安装 @tanstack/react-query使用以下命令打包：

npm install @tanstack/react-query
# --- or ---
yarn add @tanstack/react-query

按照我们在 SWR 部分中执行的相同步骤安装 Axios 包并定义基本 URL。 准备好用 TanStack Query 重写之前的应用程序吧！

清洁里面的所有东西 App.js文件并添加以下导入：

import React, { useState } from 'react';
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
  useQueryClient,
  useMutation } from '@tanstack/react-query';
import axios from 'axios';

import './App.css';

Here, the useQuery and useMutation Hooks help with data fetching and updating (cached data). We can use the QueryClient class to create a broker-like instance to access or manipulate cached data. The useQueryClient Hook returns the current QueryClient reference in all app components.

The QueryClientProvider component enables access to cached data for the entire React app, similar to the inbuilt Context.Provider component in the React Context API.

Implementing data fetchers and custom Hooks

与 SWR 类似，现在我们可以为 Axios 创建一个包装器，一个将产品插入数据库的函数，以及一个用于获取缓存产品的自定义 Hook，如下所示：

function fetcher(url) {
  return axios.get(url).then(res => res.data);
}

async function addProduct(product) {
  let response = await axios.post('/products', product);
  return response.data;
}

function useProducts() {
  const { data, isLoading, error } = useQuery(['products'], () => fetcher('/products'));
  return {
    products: data,
    isLoading,
    isError: !!error
  };
}

与 SWR 不同，在这里，我们有方便的 isLoadingprop 用于条件渲染，但在版本 4 中，我们需要将基于数组的唯一键和 URL 段发送到 useQueryHook 因为 Hook 使用上下文对象调用 fetcher 函数——它不像 SWR 那样直接传递唯一键字符串。

资源猫App，聚合多个影视资源，秒播追剧不卡畅快观影！

使用 TanStack Query 获取数据

我们可以使用相同的 Products来自 SWR 项目的组件源，因为自定义 Hook 几乎相同：

function Products() {
  const { products, isLoading, isError } = useProducts();

  if(isError)
    return (
      
Unable to fetch products.
    );

  if(isLoading)
    return (
      
Loading products...
    );

  return (
    products.map((product) => (
      

        
{product.name}
        
${product.price}
      
    ))
  );
}

我们可以使用 useProducts挂钩多个组件，无需担心 RESTful HTTP 请求重复问题，因为 TanStack Query 也可以像 SWR 那样对类似的请求进行重复数据删除。

改变缓存的数据并使请求无效

创建一个名为 AddProduct并使用以下代码实现一种添加新产品的方法：

function AddProduct({ goToList }) {
  const { products } = useProducts();
  const queryClient = useQueryClient();
  const mutation = useMutation((product) => addProduct(product), {
    onMutate: async (product) => {
      await queryClient.cancelQueries(['products']);

      const previousValue = queryClient.getQueryData(['products']);
      queryClient.setQueryData(['products'], (old) => [...old, product]);
      return previousValue;
    },
    onError: (err, variables, previousValue) =>
      queryClient.setQueryData(['products'], previousValue),
    onSettled: () => queryClient.invalidateQueries(['products'])
  });

  const [product, setProduct] = useState({
    id: products ? products.length + 1 : 0,
    name: '',
    price: null
  });
  const [disabled, setDisabled] = useState(true);

  async function handleAdd() {
    setTimeout(goToList);
    mutation.mutate(product);
  }

  function handleFieldUpdate(e) {
    const element = e.target;
    const value = element.type === 'number' ? parseInt(element.value) : element.value;
    const nextProduct = {...product, [element.name]: value};

    setProduct(nextProduct);
    setDisabled(!nextProduct.name || !nextProduct.price);
  }

  return(
    

      
      
      Add
    
  );
}

TanStack Query 提供了一个全功能的变异 API，提供对整个变异生命周期的透明访问。 如您所见，我们有 onMutate, onError， 和 onSettled回调来实现我们的变异策略。

在这个例子中，我们直接用新的产品对象更新缓存的数据，然后让 TanStack Query 向 POST在后台更新服务器状态的端点。

SWR 将变异策略作为内置功能提供，并提供有限的自定义支持，但这并不是一个破坏者，因为 SWR 的固定变异策略几乎解决了所有开发人员的需求。 但是，与 SWR 不同，TanStack Query 允许您根据需要实施突变策略。

让我们为 App零件：

const queryClient = new QueryClient();

查询客户端实例有助于提供对每个应用程序组件中缓存数据记录的访问。

最后，添加导出的 App组件源到您的 App.js文件：

function App() {
  const [ mode, setMode ] = useState('list');
  return (
    
      

        
 { setMode('list') }}
            className={mode === 'list' ? 'selected' : ''}>All products
        
 { setMode('add') }}
            className={mode === 'add' ? 'selected' : ''}>Add product
      
      

        { mode === 'list' ?  :
             setMode('list')}/> }
      
    
  );
}

export default App;

我们现在需要用 QueryClientProvider库组件通过提供查询客户端引用来获取 useQueryClient在所有子组件中正常运行。

启动 RESTful 模拟服务器并运行应用程序——您将看到我们使用 SWR 实现的相同应用程序。 尝试打开两个标签并添加新产品； 正如我们所期望的那样，您将看到重新验证焦点功能正在发挥作用。

现在，让我们根据上述发现比较 SWR 和 TanStack Query 库。

SWR 与 TanStack 查询

基本的 CRUD 功能

早些时候，我们尝试了数据检索和操作（获取和变异）来测试两个缓存库中的 CRUD 支持。 SWR 和 TanStack Query 都提供了实现示例应用程序所需的功能。

SWR 力求以最小的方式提供每个功能，这可能会激励开发人员为与数据缓存相关的活动编写更少的代码。 但是，最小的 API 设计有时会受到深度定制的限制。 TanStack Query 以比 SWR 更可定制的方式提供基本的获取和变异功能，而 SWR 以比 TanStack Query 更简单的方式提供类似的功能。

这两个库都与后端无关，具有基于 promise 的 fetcher 函数，因此您可以将 SWR 和 TanStack Query 与 REST、GraphQL 或任何其他通信机制与您喜欢的首选库一起使用：Axios、 Unfetch 、 graphql-request 等。

总体而言，这两个库都应满足开发人员对基本获取和变异支持的要求。

人气和开发者支持

一个开源库通常会在以下几种情况下变得流行并获得 GitHub stargazers：

• 当更多开发者使用特定库时

• 当该库提供优于平均水平的开发人员支持时

• 当他们的存储库维护良好时

这两个库都有很多 GitHub stargazers。 这两个库也有很好的开发者社区——开发者通过回答这些库的 GitHub 存储库上的支持查询来互相帮助。 React SWR 不提供用于调试的官方开发人员工具，但社区成员创建了一个用于调试目的的 GUI 开发人员工具。

TanStack Query 维护比 SWR 更详细、组织良好和支持性的官方文档。 但是，这两个库都为开发人员提供了出色的示例项目/代码片段，以快速了解他们的基本概念。

开发者工具

第三方库不需要专用的 GUI 调试工具。 尽管如此，像缓存这样的主题确实很复杂，因此缓存库的开发人员工具可以真正节省开发时间。

TanStack Query 带有一个官方的开发者工具，但是 SWR 的开发者社区为 SWR 创建了一个非官方但很好用的 swr-devtools 。

swr-devtools 很小，只显示只读数据，但它确实包含调试所需的关键信息：

SWR DevTools 社区 GUI 显示过去的查询

TanStack Query 开发人员工具向您显示缓存的数据并允许您操作缓存的内容，这与只读的 swr-devtools 不同：

TanStack Query DevTools GUI 显示当前查询

According to the GitHub issue tracker, the swr-devtools project is planning to add support for cache manipulation into the developer tools panel.

Inbuilt usability features

There are three key reasons to use a library like SWR or TanStack Query:

1. 减少同步服务器状态和 React 应用状态所需编写的代码量

2. 通过数据缓存和去重查询（如概念）以最佳方式使用远程资源

3. 通过实时体验提高应用程序可用性

可用性改进是缓存和查询优化的关键原因，因此这两个库竞争性地提供了以下可用性特性：

• 重新验证焦点

• 网络状态重新获取

• 数据预取

• 基于时间间隔的重新验证

TanStack Query 提供以下额外的可用性功能：

• 滚动恢复，用于在用户再次返回组件时保存无限滚动位置

• 查询取消以停止长时间运行的查询

• 离线变异支持

捆绑包大小和性能优化

并非所有用户都拥有超快的互联网连接或使用高端计算机。 因此，保持健康的包大小并实施性能优化有助于所有用户顺利运行您的应用程序，无论他们的互联网速度和计算机规格如何。 将用户计算机中的最佳硬件资源用于 Web 应用程序是一种很好的做法。

React SWR 是一个非常轻量级的库： BundlePhobia 测量其压缩后的大小仅为 4.2kB。 TanStack Query 由于其广泛的功能而有点沉重，因此它是 11.4 kB gzipped 。 它确实是 React 核心库的四倍多！

这两个库都在内部进行了渲染优化、请求重复数据删除和缓存优化。 请注意，缓存库不会提高 HTTP 请求处理速度——HTTP 请求性能取决于各种因素，例如 HTTP 客户端库性能、浏览器的 JavaScript 引擎实现、网络速度、当前 CPU 负载等。

SWR 与 TanStack 查询：总结

让我们将上述比较因素总结在一张表中。 查看下表并并排比较 SWR 和 TanStack Query：

比较因子	反应 SWR	TanStack 查询
整体 API 设计	为具有一些固定功能的开发人员提供最小的 API	为具有完全可定制功能的开发人员提供详细且有些复杂的 API
包大小（压缩后）	4.2 KB	11.4 KB
受欢迎程度、社区支持和文档	良好的社区，维护良好的存储库，以及带有演示的整体良好文档	良好的社区、维护良好的存储库和信息丰富的文档，其中包含许多实际示例和完整的 API 参考
基本数据获取和变异功能	满足开发者需求，但开发者必须为某些功能编写额外代码，可能面临深度定制问题	通过深入的定制支持满足开发人员的要求。 尝试将其与较小项目集成的开发人员可能会发现 API 比应有的复杂一些
性能优化	支持请求去重、渲染优化和优化缓存	支持请求去重、渲染优化和优化缓存
内置可用性功能	焦点重验证、网络状态重取、数据预取、间隔重验证	焦点重验证、网络状态重取、数据预取、间隔重验证、请求取消、离线变异、滚动恢复
面向开发人员的内置功能	提供分页和无限加载功能。 开发者社区实现了一个带有 Chrome 和 Firefox 扩展的开发者工具 GUI。 支持将缓存持久化到外部存储位置（即， localStorage).	提供分页和无限加载功能。 它带有一个支持缓存操作的官方开发者工具 GUI。 支持将缓存持久化到外部存储位置（即， localStorage).
反应悬念	支持的	支持的
对其他前端库的官方支持	不，有类似的社区库可用： sswr	正在进行中，类似的社区库可用： vue-query

结论

在本文中，我们创建了一个包含 SWR 和 TanStack Query 库的示例 React 应用程序，然后我们根据开发人员的经验和可用功能对它们进行了比较。

正如我们在此处所概述的，这两个库的竞争性能都更好，并且各有利弊。 React SWR 的目标是提供一个最小的 API，通过维护一个轻量级库来解决 React 请求处理中的缓存问题。 同时，TanStack Query 努力为同一问题提供功能齐全的解决方案。

有时，TanStack Query 看起来像一个框架，它通过一个开发工具包（如 Angular）提供您所需的一切——另一方面，SWR 看起来更像 React，因为它只专注于解决一个问题。 React 引入了功能组件以降低基于类的组件的复杂性，因此喜欢这种简单性的开发人员可能更喜欢 SWR 而不是 TanStack Query。

喜欢使用详细/强大的 API 并寻求类似框架的一体化数据缓存解决方案的开发人员可以选择 TanStack Query 而不是 SWR。 TanStack Query 团队计划通过核心 TanStack Query 库的适配器库为 Svelte、SolidJS、Vue.js 和 vanilla JavaScript 应用程序提供官方支持。 然而，前端开发者社区已经根据 TanStack Query 和 React SWR API 为其他前端框架实现了几个开源缓存库。

我们的结论？ 尝试这两个库。 根据您的 API 偏好选择一个。 TanStack Query 具有 SWR 在撰写本文时不支持的几个独特功能和深度自定义。 这两个库很可能会变得同样功能齐全和健壮，特别是如果 SWR 承诺在不久的将来实现一些缺失的功能。

但是，从最小 API 设计的角度来看，SWR 已经完成，并提供了您寻求的强制性功能，而不会进一步增加包大小，TanStack Query 肯定会这样做。

全面了解生产 React 应用程序

调试 React 应用程序可能很困难，尤其是当用户遇到难以重现的问题时。 如果您对监控和跟踪 Redux 状态、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请 尝试 LogRocket 。

LogRocket 就像一个用于 Web 和移动应用程序的 DVR，几乎可以记录您的 React 应用程序上发生的所有事情。 无需猜测问题发生的原因，您可以汇总并报告问题发生时应用程序所处的状态。 LogRocket 还监控您的应用程序的性能，并使用客户端 CPU 负载、客户端内存使用情况等指标进行报告。

LogRocket Redux 中间件包为您的用户会话增加了一层额外的可见性。 LogRocket 记录来自 Redux 存储的所有操作和状态。