自定义反应钩子。它们是什么以及它们有什么帮助？

Photo by 劳塔罗·安德里亚尼 on 不飞溅

介绍

React Hooks 是在 React.js v16.8 中引入的。它们允许我们在功能组件中使用状态，类似于基于类的组件的生命周期挂钩。对于每种情况，都有一个可以使用的 React Hook。从常用的钩子之类 使用状态 和 使用效果 像钩子一样 使用回调 和 使用备忘录 ，您可以花时间浏览 文档 你需要的钩子。

既然你可能遇到的几乎所有情况都有钩子，那么你需要自己的 React Hook 吗？

什么是自定义挂钩？

当我们想在多个地方重用某些逻辑时，我们将其提取到一个函数中。如果我们还想与它一起重用一些 JSX，我们将它提取到一个单独的组件中。同样，React Hook 也是一个函数。

如果我们想创建一个也使用 React Hooks 的可重用函数，例如 使用状态 和 使用效果 ，我们不能将此逻辑存储在普通函数中。

可以创建一个组件来存储这个可重用的逻辑，这样我们就可以使用钩子了。但是，如果我们没有在该组件中编写任何 JSX，这并不理想。

在这种情况下，可以将可重用的逻辑提取到自定义的 React Hook 中。制作一个自定义的 React Hook 很简单——在函数名前加上 利用 .例如：

A regular function vs a custom React hook.

自定义挂钩示例

这是一些已提取到自定义挂钩中的逻辑。

自定义挂钩 使用SelectClub 将一系列体育俱乐部作为参数。一个人可以属于一个或多个体育俱乐部。如果一个俱乐部被标记为一个人的最爱，则返回该俱乐部的代码。如果用户属于单个俱乐部，则返回该俱乐部的代码。

An example of a custom hook.

包起来

我希望这个简短的指南能帮助你理解 React 中的自定义钩子以及如何使用它们。

就像循环的 JSX 和逻辑可以变成可重用的组件一样，使用 React Hooks 的逻辑也可以变成可重用的自定义钩子。

最初发布 在我的博客上 .

升级编码

感谢您成为我们社区的一员！你走之前：

• 为故事鼓掌，关注作者
• 查看更多内容 升级编码出版物
• 关注我们： 推特 | 领英 | 通讯

加入 Level Up 人才集体，找到一份了不起的工作

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

本文链接：https://www.qanswer.top/15330/11310508

标签：自定义,它们,钩子,重用,React,Hook,使用
来源： https://www.cnblogs.com/amboke/p/16656773.html