5G|分享7 个很棒的 React Hooks，内含它们的用法和示例
文章图片
【5G|分享7 个很棒的 React Hooks，内含它们的用法和示例】
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
第一个：useFiler Hook
克里斯托弗·帕蒂（Christopher Patty）收藏了一个非常酷的Hook ， 称为“crooks\" 。 我个人还是比较喜欢它的useFiler Hook ， 因为它能使我能够在Web浏览器中创建虚拟文件系统 。 而且 ， 它是利用浏览器的本地存储来管理文件及其内容 。 那么 ， 首先 ， 你得在你的应用程序中安装crooks软件包 。
现在 ， 从crooks中导入useFiler Hook 。
至此 ， 到这里我们准备初始化挂钩并管理虚拟文件系统 。 这是一个快速的示例代码片段 。
正如你可以从上面的代码中看到 ， 我们现在知道了add() ， remove() ， update() ， clear() 。 让我们看看如何使用它们 。
1、Add File：该add()函数接受一个必需的参数 。 在这里 ， 我们需要传递JSON可序列化的数据 。
需要注意的一点是 ， 此功能为每个新文件自动生成一个ID 。 但是 ， 你仍然可以通过传递整数或字符串作为第二个参数来设置自定义ID 。
2、Update File：update()方法接受两个参数 。 第一个是文件的ID ， 而第二个参数用于传递新数据 。
3、Remove File：在remove()函数中传递文件ID 以将其删除 。
4、Clear All Files：调用该clear()函数删除所有文件 。
第二个：useHover Hook
useHover Hook属于“Captain hook”合集 ， 基本上 ， 它会跟踪屏幕上的鼠标光标以检测是否将其放置在特定元素上 。 那么如果是这样 ， 它将会触发悬停的事件 。 导入Hook：
初始化useHover Hook：
此处 ， hoverMe指的是特定的HTML元素 ， 而isHovered包含可以在条件语句中检查的布尔值 。 例如 ， 我们可以使用类似这样的东西 。
第三个：useFetch Hook
Steven Persia（一名MERN Stack开发人员）编写了一份名为“ Captain hook ” 的React Hooks清单 ， 这对日常工作非常有帮助 。 Hooks的以下几个示例来自他的收藏 。 useFetch可用于从API获取数据 。 请求完成后 ， 它将返回响应和错误（如果有） 。 现在 ， 将其导入到你的项目中 。
发出请求 。
第四个：useSlug Hook
Slug是每个Web项目的重要组成部分 。 实际上 ， 它也可以提高网站的SEO 。 因此 ， 史蒂文（Steven）加入useSlug到他的“Captain hook”系列 。 我们可以使用它快速将任何字符串转换为对SEO友好的代码段 。 事实上它也足够“聪明” ， 可以用其标准的对等音变音符号（重音符号）代替 。 例如 ， 它将é或è转换为e 。 与往常一样 ， 我们首先需要导入hook：
用法：在初始化挂钩时 ， 将任何字符串（例如文章标题）作为第一个参数传递 。 结果 ， 它将返回格式正确的块 ， 该块可立即用于项目中 。
第五&六个：useDrag & useDrop Hooks
有一个开源的React Hooks库叫做“ ahooks ” ， 它是由电子商务巨头阿里巴巴和一些自愿捐款者积极开发的 。 在撰写本文时 ， 它有大约46个Hooks 。 在本节中 ， 我主要向你介绍Hooks useDrag和useDrop 。 你可能已经对它们的功能有所了解 。 但是 ， 我不得不提的是 ， 它们可以帮助我们实现HTML5的拖放功能 。 首先：安装
导入Hooks：
用法：首先 ， 初始化useDrag和useDropHooks 。 useDrag返回传递给DOM元素的道具 。 而useDrop返回返回到放置区域的道具 。 它还使用布尔属性通知我们拖动元素是否在放置区域的顶部isHovering 。 最后 ， useDrop具有四个回调函数 ， 这些函数根据放置的项的类型执行 。
1、onText
2、onFiles
3、onUri
4、onDom
我们可以使用鼠标拖动的HTML5元素 。
这是一个HTML5元素 ， 你可以在其中放置一些内容 。
第七个：useDarkMode Hook
克雷格·沃克（Craig Walker）最初开发了“ React Recipes ” ， 这是定制的React Hooks合集 。 它提供了useDarkModeHook ， 可在网站主题的明暗模式之间切换 。 切换模式后 ， 它将当前值存储在localStorage中 。 这意味着在打开我们网站的所有浏览器选项卡上可以立即应用用户的首选模式 。 首先：安装库
Import
示例:基本上 ， useDarkMode()返回两件事 ， 1、darkMode：一个布尔值 ， 当激活暗模式时为true 。 2、setDarkMode：在明暗模式之间切换 。
最后
今天 ， 你已经了解了React Hooks在日常生活中的用法 。 我们只是看到了一些示例用例 。 但是 ， 你可以将大量的开源Hooks作用到项目中 。 实际上 ， React Hooks的主要优点是它使我们能够编写更好和更实用的代码 。 谢谢阅读！
推荐阅读
- FGO金枪虞详情：男性特攻绿卡单体，第二个充能金卡单体枪
- 新个体经济为啥这么＂火＂ 分享也是一项＂严肃创业＂
- 科学探索|揭秘星际物种起源：多个行星孵化器组成“生命之树”
- 9月，桃花运大好，枯木逢春，守得云开见月明，邂逅真爱的3个星座
- 看上去相当的独立，实际上爱情里是个粘人鬼的三大星座
- 星车记|买车内饰也要好好斟酌，汽车座椅3个要点，不注意开久就后悔了
- 9月，走出逆境，迈向辉煌，3个星座人生大红大紫！
- 这些星座的男生是护妻小超人，嫁给他们很幸福！
- 9月，一喜贵人眷顾，二喜桃花助阵，3个星座好事成双！
- 梅拉尼娅·特朗普|想拉个小手怎么这么难？美国总统特朗普又被第一夫人拒绝了