被低估的 React Hooks

什么是自定义 Hooks 👐

useLocalStorage 📍

使用暗黑模式🌕🌗🌑

useClippy 📋

结论👊

什么是自定义 Hooks 👐

考虑到大部分 React 粉丝已经转而使用函数式组件，对钩子的需求也随之增加，所以今天，我将向大家介绍 3 个我觉得没有得到应有重视的自定义钩子。

但首先，什么是自定义钩子？如何创建它？根据 React 文档，自定义钩子是“一个名称以 'use' 开头的 JavaScript 函数，它可以调用其他钩子”。它们通常会返回一个值和一个可以修改该值的函数。例如，以下setState钩子：

const [state, setState] = useState("initialValue")

返回解构后state的setState。所以，当你创建自己的自定义钩子时，你也可以这样做。其实很简单。创建自定义钩子时，你可以利用之前创建的钩子并添加更多功能。下面的 useLocalStorage 钩子就是这样创建的。

自定义钩子提供了一个抽象层，使你的代码更易于阅读，并能提高你的工作效率。我建议你在下一个 React 项目中尝试自定义钩子，因为它们可以用来添加任何功能。例如，下面列出的三个钩子允许你使用本地存储、在明暗模式之间切换以及操作浏览器剪贴板。

useLocalStorage 📍

感谢usehooks.com和Web Dev Simplified提供此帮助

如果您不熟悉 localStorage API，它的工作原理与Cookie非常相似，它允许您将用户数据保存在浏览器中，以便在用户刷新页面或关闭网站时不会丢失。这对于在调色板网站上保存用户的调色板非常有用，而无需强制用户注册。在 localStorage 中，数据以 JSON 格式存储，因此您需要一个键和一个值来表示数据。

useLocalStorage 钩子本质上就是 useState 钩子，但每个状态也会保存到 localStorage 中。一个实际应用是保存用户当前歌曲和已保存的歌曲，我在制作个人音乐播放器时就用过这个功能。在下面我从项目中提取的代码中，你可以看到我刚刚在 useState 钩子上进行了构建：

import { useState, useLayoutEffect, useEffect } from "react";

export default function useLocalStorage(key, value) {
    const [state, setState] = useState(value)

    useLayoutEffect(() => {
        const data = localStorage.getItem(key)
        setState(JSON.parse(data))
    }, [])

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(state))
        }, [state])

    return [state, setState]
}

让我解释一下此代码片段的各个部分：

• useLocalStorage(key, value)- 与 useState 类似，此钩子将接受初始值，但也需要一个键

• const [state, setState] = useState(value)- 使用值参数初始化状态

• useLayoutEffect(...)- 使用了两个 useEffect，但第一个用于从 localStorage 中获取数据，由于没有依赖项，它只在组件挂载时运行一次。我使用了 useLayoutEffect，因为它在组件挂载之前运行，而不是挂载之后。这可以避免内容渲染默认数据，然后在一秒后切换到 localStorage 数据的问题。

• useEffect(...)- 第二个 useEffect 用于将新状态设置为 localStorage，并将状态作为依赖项，以便每次状态更改时都会保存到 localStorage。阅读此文，了解更多关于 localStorage 方法的信息，例如我上面使用的 setItem 和 getItem。

• return [state, setState]- 这是将函数设置为钩子的部分。现在你可以用这个函数替换所有对 setState 的调用，因为它也可以用相同的方式解构。你只需要将键添加为第一个参数即可。

使用暗黑模式🌕🌗🌑

在现代，黑暗模式对于任何作品集网站来说都是必不可少的，那么为什么不创建一个可重复使用的钩子来简化流程呢？

对于这个钩子，我不会展示它的代码，因为它有点高级，但你可以在这里查看。尽管如此，我仍然会向你展示如何在定义它之后使用它。这个钩子实际上返回一个对象，该对象包含切换、启用和禁用暗黑模式所需的值和函数，但它仍然是相同的概念，只是以不同的方式编写。你需要编写一些 CSS 来配置亮黑模式的外观，但切换可以通过钩子来处理。

import useDarkMode from 'use-dark-mode';

const DarkModeToggle = () => {
  const darkMode = useDarkMode(false);

  return (
    <div>
      <button type="button" onClick={darkMode.disable}>
        ☀
      </button>
      <input type="checkbox" checked={darkMode.value} onChange={darkMode.toggle} />
      <button type="button" onClick={darkMode.enable}>
        ☾
      </button>
    </div>
  );
};

代码解释：

• const darkMode = useDarkMode(false)- 传递给钩子的“false”指定它将默认处于灯光模式

• \<button type="button" onClick={darkMode.disable}>- 由于钩子的返回值是一个对象，因此可以调用 darkMode.disable 来改变状态

• \<input type="checkbox" checked={darkMode.value} onChange={darkMode.toggle} />- 钩子返回的值要么是 true 要么是 false，因此您可以使用“checked”属性将复选框或切换按钮设置为正确的模式

useClippy 📋

useClippy 是一个钩子，允许你查看复制/粘贴剪贴板并将项目复制到剪贴板。例如，它可以用于制作一个按钮，点击后会复制 URL。

再次强调，对于这个钩子，我将只展示用于应用它的代码，但你可以在这里查看实际的钩子（虽然是用 Typescript 编写的）

import useClippy from 'use-clippy';

export default function MyComponent() {
  const [clipboard, setClipboard] = useClippy();

  return (
    <div>
      <button
        onClick={() => {
          alert(`Your clipboard contains: ${clipboard}`);
        }}
      >
        Read my clipboard
      </button>

      <button
        onClick={() => {
          setClipboard(`Random number: ${Math.random()}`);
        }}
      >
        Copy something new
      </button>
    </div>
  );
}

代码解释：

• const [clipboard, setClipboard] = useClippy();- useClippy 的解构方式与 useState 相同，但返回剪贴板上的最后一项以及保存到剪贴板的函数

• <button>...</button>- 按钮从剪贴板中抓取最后的内容，并在单击时将新项目设置到剪贴板（非常不言自明）

结论👊

请随意留下您发现或制作的任何未列入此列表的自定义钩子。