反应自定义钩子

如果你正在看这篇文章，我希望你一定熟悉 React Hooks。在本文中，我们将为我们的应用程序创建一个自定义挂钩。

首先，为什么我们需要在应用程序中创建自定义挂钩？以前（在 React 16.8 之前），有两种流行的传递状态逻辑的方法，即 渲染道具 和 HOC（高阶组件） .现在，可以使用 react 自定义钩子来传递有状态的逻辑，而无需创建更多组件来响应应用程序树。

Fig: react custom hook

构建一个 React 自定义 Hook

反应自定义钩子 是一个 javascript 可重用函数，就像一个以 利用 并且可以通过调用其他反应钩子来弥补。 定制挂钩 将输入作为参数并返回不同于 反应组件 它将输入作为 props 并返回 JSX 组件或标记。自定义挂钩的名称应以“ 利用 “并且应该遵循 钩子规则 .

让我们考虑以下示例

creating useDebounce hook

在上面的例子中，我们创建 使用去抖动 钩子，它只是一个带有两个参数的javascript函数 价值观 和 延误 并返回一个新的 去抖值 .的目的 使用去抖动 就是将输入值延迟一定时间返回值，这个函数搞定了。

使用自定义挂钩

使用去抖动 钩子对于从列表中搜索项目更有用。自从 使用去抖动 延迟输入，避免API的频繁调用，有助于我们的应用程序性能和用户体验。

让我们考虑下面的例子来看看我们的自定义钩子的使用 使用去抖动 .

using useDebounce hook

结论

Custom Hook 是一个可重用的 javascript 函数，可用于传递可能的状态逻辑，而无需创建更多组件来响应应用程序树并提高响应应用程序的性能。

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

本文链接：https://www.qanswer.top/5756/58063123