标签：驻波比 React 获取 API 使用 威力 SWR 数据
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。