SWR 与 React 的威力
作者：互联网
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
标签：驻波比,React,获取,API,使用,威力,SWR,数据 来源： https://www.cnblogs.com/amboke/p/16654315.html