SWR 与 React 的威力

在本文中，我们将研究一种在 React Apps 中检索数据的新方法，名为 驻波比 .这是一组用于远程数据获取的钩子，使事情变得更容易，例如缓存、分页等。

在整篇文章中，我们将构建一个小型 React 应用程序来展示 SWR 库的一些主要但令人惊叹的功能。该应用程序将获取并显示太阳系的行星列表。

以下是最终演示应用程序所在的 Git 存储库。

[ https://github.com/JayaShakthi97/blogs-swr](https://github.com/JayaShakthi97/blogs-swr)

我已经配置了一个简单的 NodeJS Express 后端来获取数据。后端代码也可以在存储库中找到，您可以按照自述文件开始。

重要的是要了解 SWR 不是数据获取库。它可以用作 Fetch API 和数据获取库（如 Axios）的包装器，以启用更多功能，如缓存和分页。

让我们继续看看如何利用 SWR 来呈现一个简单的数据列表。首先让我们实现 API 函数来获取行星列表。 Axios 已被用作数据获取库。

首先让我们初始化一个 httpClient 获取数据。请注意，后端服务运行在[ http://localhost:8000](http://localhost:8000) .

Initializing httpClient with Axios

然后我们可以使用 SWR 创建一个函数来获取数据并返回给组件。

usePlanetList function

在这里， 使用SWR hook 有两个参数作为 网址 和 取器 功能。 网址 是后端 API 的路径。这 取器 函数负责处理数据获取。如果您想使用 Fetch API 进行数据获取，只需将 fetcher 函数替换为以下内容。

fetcher function with Fetch API

使用行星列表 返回一个包含三个属性的对象。 数据 带出从 API 获取的数据。 错误 如果在获取数据时出现错误，则带出错误对象。在初始阶段，两者 数据 和 错误 是未定义的。这已被用于显示加载器使用 正在加载 属性。

Complete planets API file

现在让我们看看如何使用已实现 使用行星列表 在 React 中渲染 UI 的函数。在这个例子中，我将使用 反应引导 用于造型。

在 - 的里面 主页组件 打电话给 使用行星列表 功能如下。

Invoking usePlanetList function

然后我们可以使用 数据，错误，正在加载 渲染组件。

如何 驻波比 工作是，首先它在缓存中检查请求的数据。如果数据在缓存中可用，则立即返回该数据。同时 驻波比 如果有新数据，则发出网络请求并更新 UI。

Initial render

驻波比 能够检测窗口焦点并在默认情况下重新验证​​重新聚焦的数据。此功能可能非常昂贵，因此最好谨慎使用。

Revalidating on focus

快速了解我们如何使用 驻波比 在 WSO2 中，我们实现了[ 使用请求](https://github.com/wso2/identity-apps/blob/master/apps/console/src/features/core/hooks/use-request.ts) 请求配置传递到的钩子。

里面 API函数 我们用这个 使用请求 钩子，而不是 使用SWR 直接钩。这种方法的美妙之处在于，如果我们想替换数据获取库，我们可以简单地更新 使用请求 钩。例如，如果我们要使用 GraphQL 我们可以更新 使用请求 钩子，它会无缝地工作。

最后的想法

这篇文章是关于 驻波比 钩。我们只是在表面上划过，没有潜入深处。更多的功能，如分页、重估和变异将在以后的文章中讨论。

平安✌️

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11992/40200409