5 个超棒的 React Hooks ⚛️

自从该功能发布以来，React 社区已经创建了令人难以置信的钩子，我将展示我使用的 5 个对我有很大帮助的钩子。

嘿，我在自己的博客上更新了这篇文章，请在这里查看！

图片延迟加载
外部点击钩
获取浏览器位置
读取和写入剪贴板
设置文档标题

使用Summaryze Forem生成

图片延迟加载🌄

React 使用延迟加载图像使用Intersection Observer API为延迟加载图像提供高性能解决方案，它非常轻量级，因此不会给您的应用程序增加任何额外的体积，并且使用起来非常简单：

import React from 'react';
import useLazyLoadImage from 'react-use-lazy-load-image';

function App() {
  useLazyLoadImageReact();

  return (
    <div>Lots of content that means the image is off screen goes here</div>
    <img src="IMAGE DATA" data-img-src="https://link-to-my-image.com/image.png" alt="My image" />

  )
}

外部点击钩🖱

我认为useOnClickOutside是最好的钩子之一，通过这个钩子，你可以轻松捕获元素外部的点击，例如对于模态框来说非常有用。
以下是演示代码：

import * as React from 'react'
import useOnClickOutside from 'use-onclickoutside'

export default function Modal({ close }) {
  const ref = React.useRef(null)
  useOnClickOutside(ref, close)

  return <div ref={ref}>{'Modal content'}</div>
}

获取浏览器位置🌎

useLocation帮助您获取浏览器位置。

import {useLocation} from 'react-use';

const Demo = () => {
  const state = useLocation();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

读取和写入剪贴板⌨️

useClippy是一个小钩子，可以帮助您轻松地从用户的剪贴板读取和写入：

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>
  );
}

设置文档标题👨🏽‍💻

@rehooks/document-title允许您设置页面标题，只需从组件调用它并传递标题字符串即可：

import useDocumentTitle from '@rehooks/document-title';

function MyComponent() {
  useDocumentTitle('Page Title');
  return <div/>;
}

结论

这些是我常用的一些钩子，它们帮我节省了很多时间。
你还知道哪些超赞的钩子？快来评论吧！
祝一切顺利！

文章来源：https://dev.to/tuliocalil/5-awesome-react-hooks-23jc