效率宝典：7个超棒的React Hooks

全文共3741字，预计学习时长10分钟

 

图源：unsplash

 

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

 

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

 

useFilerHook

 

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

 

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

 

npm install crooks --save

 

现在，引入 crooks中的useFiler Hook：

 

import { useFiler } from 'crooks'

 

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

 

constApp= () => {
       const [files, {add,remove, update, clear}] =useFiler("localStorageItem")
       return (
         <div>My Project</div>
       )
     }

 

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

 

· 添加文件

 

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

 

add("Save this JSON-serializable data in the file.")

 

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

 

· 更新文件

 

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

 

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

 

· 移除文件

 

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

 

remove("abc1234")

 

· 清除所有文件

 

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

 

clear()

 

useFetch Hooks

 

图源：unsplash

 

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

 

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

 

import useFetch from "hooks/useFetch";

 

发出请求：

 

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

 

useHover Hook

 

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

 

引入useHover Hook：

 

import useHover from "hooks/useHover";

 

将其初始化：

 

const [hoverMe, isHovered] = useHover();

 

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

 

<div ref={hoverMe}>{isHovered ? "Hovered!" : "Hoverme!"}</div>

 

useSlugHook

 

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

 

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

 

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

 

import useSlug from "hooks/useSlug";

 

· 用法

 

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

 

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

 

useDrag和useDropHooks

 

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

 

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

 

先来安装：

 

npm install ahooks --save

 

引入这个hook：

 

import { useDrag, useDrop } from 'ahooks';

 

· 用法

 

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

 

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

 

· onText
· onFiles
· onUri
· onDom

 

const getDragProps =useDrag();
            const [props, {isHovering }] =useDrop({
             onText: (text, e) => {
               alert(`'text: ${text}' dropped`);
             },
             onFiles: (files, e) => {
               alert(`${files.length} file dropped`);
             },
             onUri: (uri, e) => {
               alert(`uri: ${uri} dropped`);
             },
             onDom: (content: string, e) => {
               alert(`custom: ${content} dropped`);
             }
            });

 

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

 

<div {...getDragProps(id)}>Draggable Element</div>

 

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

 

<div {...props}>
  {isHovering ? 'Release Item Here' :'Drop Anything Here'}
</div>

 

useDarkMode Hook

 

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

 

安装库：

 

npm install react-recipes --save

 

引用：

 

import { useDarkMode } from "react-recipes";

 

· 举个例子

 

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

 

· darkMode: 当开启黑暗模式，布尔值为真。

· setDarkMode:在明暗模式之间切换。

 

functionApp() {
          const [darkMode, setDarkMode]=useDarkMode();
          return (
           <divclassName="header">
             <ToggledarkMode={darkMode} setDarkMode={setDarkMode} />
           </div>
          );
        }

 

图源：unsplash

 

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

 

一起分享AI学习与发展的干货

欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）