怎么使用不同的React hooks来解决日常所遇到的问题

这篇文章主要讲解了“怎么使用不同的React hooks来解决日常所遇到的问题”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用不同的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() 方法。接下我们来学习如何使用它们。

(1) 添加文件

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

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

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

(2) 更新文件

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

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

(3) 移除文件

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

remove("abc1234")

(4) 清除所有文件

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

clear()

2. 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");

3. 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>

4. 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

5. 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>

6. 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 (            <divclassNamedivclassName="header">              <ToggledarkModeToggledarkMode={darkMode} setDarkMode={setDarkMode} />            </div>           );         }

感谢各位的阅读，以上就是“怎么使用不同的React hooks来解决日常所遇到的问题”的内容了，经过本文的学习后，相信大家对怎么使用不同的React hooks来解决日常所遇到的问题这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！