7 个超棒的 React Hooks

在React Hooks发布之前，它的函数式组件的使用非常有限。我的意思是，当涉及到状态、上下文 API 和一些生命周期方法时，我们几乎无能为力。

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

今天，你将学习如何使用不同的React Hooks来解决日常问题。那么，让我们准备好，和我一起开启这段有趣的旅程吧！

使用文件钩子

克里斯托弗·帕蒂设计了一系列非常酷的钩子，被称为“ crooks ”。

我个人很喜欢它的useFiler钩子，因为它允许我们在网页浏览器中直接创建一个虚拟文件系统。简单来说，它利用浏览器的本地存储来管理文件及其内容。

首先，请在您的应用程序中安装crooks软件包。

npm install crooks --save

现在，从 crooks 导入 useFiler hook。

import { useFiler } from 'crooks'

至此，我们就可以初始化钩子并管理虚拟文件系统了。以下是一个简单的示例代码片段。

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

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

从上面的代码可以看出，我们现在可以使用 `__getitem__` add()、 `__getitem__` remove()、update()`__getitem__` 和 `__getitem__`clear()方法。让我们来看看如何使用它们。

添加文件

该add()函数接受一个必需参数。这里，我们需要传递一个可序列化为 JSON 的数据。

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

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

更新文件

该update()方法接受两个参数。第一个参数是文件 ID，第二个参数用于传递新数据。

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

删除文件

将文件 ID 传递remove()给删除函数。

remove("abc1234")

清除所有文件

调用该clear()函数删除所有文件。

clear()

使用获取钩子

Steven Persia （MERN Stack 开发人员）整理了一份名为“ Captain hook ”的 React Hooks 列表，对日常任务非常有帮助。

接下来的几幅钩子作品将来自他的收藏，包括这幅。

useFetch可用于从 API 获取数据。请求完成后，它将返回响应和错误（如有）。

将其导入到您的项目中。

import useFetch from "hooks/useFetch";

提出请求。

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

使用悬停钩

useHover hook 属于“Captain hook”集合。

简单来说，它会追踪屏幕上的鼠标光标，检测光标是否位于特定元素上。如果是，则会触发悬停事件。

导入钩子。

import useHover from "hooks/useHover";

初始化useHover钩子。

const [hoverMe, isHovered] = useHover();

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

例如，我们可以使用类似这样的方法。

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

使用蛞蝓钩

网址别名（Slug）是每个网站项目的重要组成部分。事实上，它还可以提升网站的搜索引擎优化（SEO）。

这就是 Steven 添加useSlug他的“Captain Hook”库的原因。我们可以用它快速将任何字符串转换成对搜索引擎友好的链接。它足够智能，能够将所有变音符号（重音符号）替换为对应的标准符号。

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

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

import useSlug from "hooks/useSlug";

用法：

初始化钩子时，将任意字符串（例如文章标题）作为第一个参数传递。这样，它将返回一个格式良好的别名，可以直接在项目中使用。

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

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

使用拖放钩子

有一个名为“ ahooks ”的开源 React Hooks 库。它目前正由电商巨头阿里巴巴及其一些志愿者贡献者积极开发。

截至撰写本文时，它大约有 46 个钩子。每个钩子都专注于解决一个特定的问题。

在本节中，我将向您介绍一对 Hooks useDrag。useDrop现在，您可能已经对它们的功能有所了解。但我仍然要说明，它们有助于我们实现 HTML5 的拖放功能。

安装

npm install ahooks --save

导入钩子

import { useDrag, useDrop } from 'ahooks';

用法

首先，初始化useDrag钩子useDrop。

useDrag返回传递给 DOM 元素的 props。而useDrop返回传递给放置区域的 props。它还使用一个布尔属性告知我们拖动元素是否位于放置区域的上方isHovering。

最后，useDrop它有四个回调函数，根据掉落物品的类型执行。

• 文本
• 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>

使用深色模式钩子

Craig Walker最初开发了“ React Recipes ”，这是一个流行的自定义 React Hooks 集合。

它提供了useDarkMode一个 Hook，用于切换网站主题的浅色和深色模式。切换模式后，它会将当前值存储在 localStorage 中。这意味着用户选择的模式将立即应用于所有打开我们网站的浏览器标签页。

安装库文件。

npm install react-recipes --save

进口

import { useDarkMode } from "react-recipes";

快速示例

基本上，useDarkMode()它返回两样东西。

• darkMode：一个布尔值，当深色模式激活时为 true。
• setDarkMode：用于切换浅色模式和深色模式。

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

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

结论

今天，你学习了如何在日常工作中使用 React Hooks。我们刚刚看到了一些示例用例。但是，还有大量的开源 Hooks 可供你使用，并集成到你的项目中。

现在，我希望您已经能够熟练地在我们的 React 项目中使用 Hooks 来调用其他人的代码。事实上，React Hooks 的主要优势就在于它能够帮助我们编写更优质、更易复用的代码。

感谢阅读！

如果您喜欢这篇文章，请不要忘记订阅我们的免费新闻简报，以便我们保持联系：https://livecodestream.dev/subscribe