缓存冲突：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文件：

imp