7个很棒的React Hooks

在React Hooks发布之前，它的功能组件在使用上有些局限。我的意思是，当涉及到与状态、上下文API和一些生命周期方法的工作时，我们无能为力。

但是，从React 16.8开始，我们有更多的灵活性来重用现有的代码。

今天，你将学习如何使用不同的React Hooks来解决日常问题。所以，让我们做好准备，跟着我一起踏上这个有趣的旅程。

useFiler钩子

Christopher Patty有一个非常酷的钩子集合，被称为"钩子".

我个人喜欢它的useFiler钩子，因为它使我们能够在网络浏览器中直接创建一个虚拟文件系统。基本上，它利用了浏览器的本地存储来管理文件及其内容。

为了开始使用，在你的应用程序中安装crooks包。

npm install crooks --save

现在，从crooks导入useFiler钩子。

import { useFiler } from 'crooks'

在这一点上，我们已经准备好初始化该钩子并管理一个虚拟文件系统。这里有一个快速的例子代码片段。

const App = () => {
  const [files, {add, remove, update, clear}] = useFiler("localStorageItem")

  return (
    <div>My Project</div>
  )
}

从上面的代码中你可以看到，我们现在可以访问add(),remove(),update(), 和clear() 方法。让我们看一下如何使用它们。

添加文件

add() 函数接受一个必要的参数。在这里，我们需要传递一个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 Hook

Steven Persia（MERN Stack的开发者）编制了一个伟大的React Hooks列表，名为"队长钩子"，在日常工作中非常有帮助。

接下来的几个钩子的例子将来自他的集合，包括这个。

useFetch可以用来从一个API中获取数据。请求完成后，它将返回响应和错误（如果有的话）。

在你的项目中导入它。

import useFetch from "hooks/useFetch";

提出一个请求。

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

useHover Hook

useHover钩子属于 "船长钩子 "集合。

基本上，它跟踪屏幕上的鼠标光标，检测它是否放在一个特定的元素上。如果是这样，它将触发悬停事件。

导入该钩子。

import useHover from "hooks/useHover";

初始化useHover 钩子。

const [hoverMe, isHovered] = useHover();

这里，hoverMe 指的是特定的HTML元素，而isHovered 包含一个布尔值，可以在条件语句中检查。

例如，我们可以使用这样的东西。

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

useSlug Hook

Slug是每个网络项目的一个重要部分。事实上，它还可以促进网站的SEO。

这就是为什么Steven在他的 "钩子船长 "系列中加入了useSlug 。我们可以用它来快速地把任何字符串变成一个SEO友好的lug。它很聪明，可以用标准的对应符号替换任何变音符号（重音）。

例如，它将把é或è转换为e。

像往常一样，我们首先需要导入这个钩子。

import useSlug from "hooks/useSlug";

使用方法。

在初始化该钩子时，传递任何字符串（例如文章标题）作为第一个参数。结果，它将返回一个格式良好的蛞蝓，可以立即在项目中使用。

useSlug("React Hooks! résoudre les problèmes quotidiens");

// react-hooks-resoudre-les-problemes-quotidiens

useDrag & useDrop 钩子

有一个开源的React Hooks库叫做"ahooks".它是由电子商务巨头阿里巴巴和一些志愿贡献者一起积极开发的。

在写这篇文章的时候，它有大约46个Hooks。它们中的每一个都专注于解决一个特定的问题。

在本节中，我将向你介绍一对HooksuseDrag 和useDrop 。现在，你可能已经对它们的作用有了一个概念。但是，我还是要提到，它们可以帮助我们实现HTML5的拖放功能。

安装

npm install ahooks --save

导入钩子

import { useDrag, useDrop } from 'ahooks';

使用方法

首先，初始化useDrag 和useDrop Hooks。

useDrag 钩子返回传递给DOM元素的props。而，返回传递给拖放区域的道具。它还使用一个布尔属性，告知我们拖动的元素是否在下降区域的顶部。useDrop 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。它在亮光和暗光模式之间切换。

function App() {
  const [darkMode, setDarkMode] = useDarkMode();

  return (
    <div className="header">
      <Toggle darkMode={darkMode} setDarkMode={setDarkMode} />
    </div>
  );
}

总结

今天，你已经学会了React Hooks在日常生活中的使用。我们只是看到了一些使用案例的例子。但是，有大量的开源Hooks可用，你可以在你的项目中加入。

现在，我希望你在我们的React项目中使用别人的代码时，可以放心使用Hooks。事实上，React Hooks的主要优点是它使我们能够写出更好的、可重复使用的代码。

认识7个了不起的React钩子