ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-09-05 08:32:41  阅读:196  来源: 互联网

标签:自定义 它们 钩子 重用 React Hook 使用


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

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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有