如何创建自定义 React Hook 来获取和缓存数据

martinez999

应用程序中的许多组件很可能必须调用 API 来检索将显示给用户的数据。使用生命周期方法已经可以做到这一点componentDidMount()，但是通过引入 Hooks，您可以构建一个自定义挂钩来为您获取和缓存数据。这就是本教程将要介绍的内容。 如果你是 React Hooks 的新手，可以先查看官方文档来了解它。之后，我建议阅读 Shedrack Akintayo 的“ React Hooks API 入门”。为了确保您能够跟上，还有一篇由 Adeneye David Abiodun 撰写的文章，其中介绍了React Hooks 的最佳实践，我相信这对您有用。 在本文中，我们将使用Hacker News Search API来构建一个自定义挂钩，我们可以用它来获取数据。虽然本教程将介绍 Hacker News Search API，但我们将让挂钩以某种方式工作，它将从我们传递给它的任何有效API 链接返回响应。 最佳反应实践 React 是一个很棒的 JavaScript 库，用于构建丰。

富的用户界面。它提供了一个很好的组件抽象，用于将您的接口组织成功能良好的代码，并且您几乎可以将它用于任何用途。 阅读有关 React 的相关文章 → 在 React 组件中获取数据 旦组件安装完毕，生命周期方法就会被调用，完成后，我们所做的就是通过 Hacker News API 发出搜索“JavaScript”的请求，并根据响应更新状态。 componentDidUpdate另一方面，当组件发生更改时，将调用生命周期方法。我们将状态中的前一个查询与当前查询进行比较，以防止每次在 电话号码数据 状态中设置“数据”时调用该方法。我们从使用钩子中得到的一件事是以一种更清晰的方式组合这两种生命周期方法——这意味着我们不需要在组件安装和更新时使用两种生命周期方法。 认识图像优化，Addy Osmani 的新实用指南，用于在网络上优化和提供高质量图像。一切尽在一本528 页的书中。 跳转至目录 ↬ 功能面板 useEffect使用钩子 获取数据useEffect一旦组件被安装，该钩子就会被调用。如果我们需要钩子根据某些 prop 或状态更改重新运行，我们需要将它们传递给依赖项数组（这是钩子的第二个参数useEffect）。 我们。



来探讨一下如何使用 hooks 来获取数据。 话虽如此，我们还status根据需要在组件上设置了几个，因为这将更好地根据某些有限状态向屏幕传达一些消息status。在空闲状态下，我们可以让用户知道他们可以使用搜索框来开始。在获取状态下，我们可以显示一个微调器。并且，在获取状态下，我们将渲染数据。 在尝试将状态设置为 之前设置数据非常重要，fetched这样可以防止在设置状态时因数据为空而发生闪烁fetched。 创建自定义挂钩  “自定义钩子是一个 JavaScript 函数，其名称以 'use' 开头，可以调用其他钩子。” —反应文档 这就是它的本质，与 JavaScript 函数一起，它允许您在应用程序的多个部分中重用某些代码。