效率宝典：7个超棒的ReactHooks

 本文转载自公众号“读芯术”(ID：AI_Discovery)。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的绥芬河网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

在React hooks发行前，React软件的功能性组件使用比较有限，在处理状态、上下文API以及一些生命周期方法时往往无计可施。但从React 16.8版本开始，用户则能更加灵活地使用一些已经存在的代码。

本文就将带大家学习如何使用不同的React hooks来解决日常所遇到的问题。

useFilerHook

Christopher Patty集合了一组很酷的hook函数，该集合被称为“crook.”。我个人很喜欢useFiler Hook，因为它能在Web浏览器中创建虚拟文件系统，而且基本上该函数是利用浏览器的本地存储来管理文档和文档内容。

首先，在应用程序中安装“crooks”安装包：

 
 
 
 
    
  
  
  
  
  1. npm install crooks --save
    2.

现在，引入 crooks中的useFiler Hook：

 
 
 
 
    
  
  
  
  
  1. import { useFiler } from 'crooks'
    2.

至此，已经准备好初始化hook并管理虚拟文件系统了。这里用一个简单的代码片段举例子：

 
 
 
 
    
  
  
  
  
  1. constApp= () => {
    2. 
  
  
  
  
  2.        const [files, {add,remove, update, clear}] =useFiler("localStorageItem")
    3. 
  
  
  
  
  3.        return (
    4. 
  
  
  
  
  4.          
    My Project
    5. 
  
  
  
  
  5.        )
    6. 
  
  
  
  
  6.      }
    7.

如上述代码所示，可以使用add(), remove(), update()以及clear() 方法。接下我们来学习如何使用它们。

(1) 添加文件

add() 函数接受一个必需的参数。我们需要传递JavaScript Object Notation(简称JSON)可序列化的数据：

 
 
 
 
    
  
  
  
  
  1. update("abc1234", "New content of file.")
    2.

注意，这个函数将会自动为每一个新文件生成一个ID，但是用户仍然可以通过传递一个整数或者一串字符串作为第二个参数来设置一个自定义ID。

(2) 更新文件

update() 方法接受两个自变量。第一个是文件的ID，而另一个自变量则用于传递新数据：

 
 
 
 
    
  
  
  
  
  1. update("abc1234", "New content of file.")
    2.

(3) 移除文件

使用 remove() 方法传递文件ID以删除它：

 
 
 
 
    
  
  
  
  
  1. remove("abc1234")
    2.

(4) 清除所有文件

调用clear() 方法移除所有文件：

 
 
 
 
    
  
  
  
  
  1. clear()
    2.

2. useFetch Hooks

图源：unsplash

Steven Persia(一位MERNStack的开发人员)编写了很多React hooks，并将其命名为“Captain hook.”，它们在处理日常任务时非常有用。接下来几个hook的例子都取自他的集合。

useFetch能够从应用程序接口(API)提取数据。请求完成后，它将返回响应及错误。将useFetch引入项目：

 
 
 
 
    
  
  
  
  
  1. import useFetch from "hooks/useFetch";
    2.

发出请求：

 
 
 
 
    
  
  
  
  
  1. const { response, errors } = useFetch("https://api.github.com/users/torvalds/repos");
    2.

3. useHover Hook

useHover Hook也属于“Captain hook”合集。通常来说，该函数会跟踪屏幕上的鼠标光标来检测其是否处在特殊的元素上方。如果是，它将会触发悬停事件。

引入useHover Hook：

 
 
 
 
    
  
  
  
  
  1. import useHover from "hooks/useHover";
    2.

将其初始化：

 
 
 
 
    
  
  
  
  
  1. const [hoverMe, isHovered] = useHover();
    2.

此处，hoverMe 表示特定的超文本标记语言元素，而isHovered则包含可以在条件语句中检查的布尔值。例如，可以这样使用：

 
 
 
 
    
  
  
  
  
  1. {isHovered ? "Hovered!" : "Hoverme!"}

4. useSlugHook

Slug是每个Web项目中必不可少的部分。事实上，它也可以提升一个网站的搜索引擎优化(Search Engine Optimization，简称SEO)。

这也是Steven将useSlug 加入他“Captain hook”合集的原因。使用useSlug可以快速将任何字符串转化为为对SEO友好的slug。它十分智能，能够将任何变音符号(重音符号)用它的标准对等音表示。例如，它能够将 é 或 è 转化为e表示。

与往常一样，首先需要引入这个hook：

 
 
 
 
    
  
  
  
  
  1. import useSlug from "hooks/useSlug";
    2.

用法：

在初始化该hook的同时，需要传递任意字符串(例如一个文章的名称)作为第一个参数。结果就是它将返回一个格式正确的slug，该slug能够立刻应用到项目中。

 
 
 
 
    
  
  
  
  
  1. useSlug("React Hooks! résoudre les problèmes quotidiens");//react-hooks-resoudre-les-problemes-quotidiens
    2.

5. useDrag和useDropHooks

有一个名为“ahooks”的开源React Hooks库，它是由电子商务巨头阿里巴巴和一些志愿者共同积极开发的。在撰写本文时，该库共有约46个hook，它们中的每个函数都聚焦于解决某一特定的问题。

这里将介绍一对hooks：useDrag 和 useDrop。你可能已经对它们的功能有所了解，但我一定要谈谈它们对我们实现HTML5的拖放功能的帮助。

先来安装：

 
 
 
 
    
  
  
  
  
  1. npm install ahooks --save
    2.

引入这个hook：

 
 
 
 
    
  
  
  
  
  1. import { useDrag, useDrop } from 'ahooks';
    2.

用法：

首先，初始化useDrag 和useDrop Hook。useDrag 返回传递给文档对象模型(Document Object Model，简称DOM)元素的Prop。useDrop 返回传递给放置区域的Prop。它还能通过布尔属性(isHovering)来通知拖动元素是否放在了放置区域的顶部。

最后，useDrop 有四个回调函数，它们依据放置项的类型来执行：

 
 
 
 
    
  
  
  
  
  1. const getDragProps =useDrag();
    2. 
  
  
  
  
  2.             const [props, {isHovering }] =useDrop({
    3. 
  
  
  
  
  3.              onText: (text, e) => {
    4. 
  
  
  
  
  4.                alert(`'text: ${text}' dropped`);
    5. 
  
  
  
  
  5.              },
    6. 
  
  
  
  
  6.              onFiles: (files, e) => {
    7. 
  
  
  
  
  7.                alert(`${files.length} file dropped`);
    8. 
  
  
  
  
  8.              },
    9. 
  
  
  
  
  9.              onUri: (uri, e) => {
    10. 
  
  
  
  
  10.                alert(`uri: ${uri} dropped`);
    11. 
  
  
  
  
  11.              },
    12. 
  
  
  
  
  12.              onDom: (content: string, e) => {
    13. 
  
  
  
  
  13.                alert(`custom: ${content} dropped`);
    14. 
  
  
  
  
  14.              }
    15. 
  
  
  
  
  15.             });
    16.

可以使用鼠标拖动的HTML5元素：

 
 
 
 
    
  
  
  
  
  1. Draggable Element

这是一个HTML5元素，可以在其中放置一些东西：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   {isHovering ? 'Release Item Here' :'Drop Anything Here'}
    3.

6. useDarkMode Hook

Craig Walker原创的“React Recipes”是一个很受欢迎的自定义React hooks集合，该集合中的 useDarkMode Hook能够实现网站主题在明暗模式之间的切换。切换模式后，它将当前值储存在localStorage中。这意味无论在哪里打开浏览器，用户偏好的模式将会被应用于所有浏览器。

安装库：

 
 
 
 
    
  
  
  
  
  1. npm install react-recipes --save
    2.

引用：

 
 
 
 
    
  
  
  
  
  1. import { useDarkMode } from "react-recipes";
    2.

举个例子，一般来说，useDarkMode() 返回结果有两类：

 
 
 
 
    
  
  
  
  
  1. functionApp() {
    2. 
  
  
  
  
  2.           const [darkMode, setDarkMode]=useDarkMode();
    3. 
  
  
  
  
  3.           return (
    4. 
  
  
  
  
  4.            
    5. 
  
  
  
  
  5.              
    6. 
  
  
  
  
  6.            
    7. 
  
  
  
  
  7.           );
    8. 
  
  
  
  
  8.         }
    9.

本文我们学习了在日常工作中应用React Hooks。上述例子仅仅只是沧海一粟，还有无数的开源hook供你应用于自己的项目中。开源的意义正在于此，React Hooks最主要的好处就是编写更多更好且更实用的代码。

新闻名称：效率宝典：7个超棒的ReactHooks
网站URL：http://www.csdahua.cn/qtweb/news45/217545.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

品牌网站制作知识

分类信息网

免备案虚拟主机空间　　 　服务器租用　　 　川银永信　　 　成都网站制作　　 　阿坝网站设计　　 　成都网络推广　　 　四川晃众门窗　　 　企业网站设计　　 　成都学生服定制　　 　msfdjwx.com　　 　宜宾网站建设　　 　营山网站建设　　 　响应式网站设计　　 　四川艺考培训　　 　成都网站制作　　 　成都网站设计　　 　班戈纳美网站　　 　成都移动服务器托管　　 　成都圣月窗帘　　 　什邡做网站