其他分享
首页 > 其他分享> > 自定义反应钩子。它们是什么以及它们有什么帮助?

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

作者:互联网

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

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 and a custom React hook prefixed with the word use.

A regular function vs a custom React hook.

自定义挂钩示例

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

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

A simple example of a custom React hook.

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