十大 React Hook 库

Hooks 的出现席卷了 React 社区。距离它首次发布已经有一段时间了，这意味着它已经有很多支持库了。在搜索任何与 React 相关的内容时，很难不遇到“Hooks”这个词。如果你还没有，应该尽快将它们添加到你的代码库中。它们会让你的编程生活更加轻松愉快。

在 React 开发中，保持简洁的代码风格、可读性、可维护性、更少的代码行数以及可复用性至关重要。本博客将为您介绍10 个值得立即开始使用的 React Hook 库。具体选择取决于个人喜好。事不宜迟，让我们开始吧。

1. 使用http

use-http是一个极其实用的包，可用于替代 Fetch API。它编写和维护质量极高。它使您的代码（更准确地说是数据消费部分）更加简洁易懂。该钩子本身使用 TypeScript，甚至支持 SSR 和 GraphQL。它返回响应、加载、错误数据以及不同的请求方法，例如 Get、Post、Put、Patch 和 Delete。

它提供的主要功能有：

请求/响应拦截器
悬念（目前处于实验阶段）
重试功能
缓存

它有详细的文档，包括 CodeSandbox 示例、Youtube 视频和 GitHub 自述文件。

使用示例：

import useFetch from "use-http"

const Example = () => {
  const [todos, setTodos] = useState([])
  const { get, post, response, loading, error } = useFetch("https://example.com")

  useEffect(() => { get("/todos") }, [])

  const addTodo = async () => {
      await post("/todos", { title: "example todo" });
      if (response.ok) setTodos([...todos, newTodo])
  }

  return (
    <>
      <button onClick={addTodo}>Add Todo</button>
      {error && 'Error!'}
      {loading && 'Loading...'}
      {todos.map(todo => (
        <span key={todo.id}>{todo.title}</span>
      )}
    </>
  );
};

2. 使用媒体

您是否曾经需要一种跟踪 CSS 媒体查询的方法？useMedia钩子提供了一种简单的方法来解决这个问题。它是一个感知钩子，可以精确地跟踪媒体查询。媒体查询对于任何应用程序或网站的响应能力都至关重要。

它使用 TypeScript 编写，并提供支持。该包有清晰的文档，解释了该钩子的用法以及测试方法。

使用示例：

import useMedia from 'use-media';

const Example = () => {
  const isWide = useMedia({minWidth: '1000px'});

  return (
    <span>
      Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"}
    </span>
  );
};

3. 康斯塔特

Constate是一个钩子包，它提供将本地状态提升到 React Context 的功能。这意味着任何组件中的任何状态都可以轻松地以最小的代价提升到上下文中。当你想在多个地方使用相同的状态，或者为多个组件提供相同的状态时，这非常有用。它的名字来源于 Context 和 State 的文字游戏。它
用 Typescript 编写，体积非常小。文档虽然不是很详细，但足以完成工作。

使用示例：

import React, { useState } from "react";
import constate from "constate";

// custom hook
function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);
  return { count, increment };
}

// hook passed in constate
const [CounterProvider, useCounterContext] = constate(useCounter);

function Button() {
  // use the context
  const { increment } = useCounterContext();
  return <button onClick={increment}>+</button>;
}

function Count() {
  // use the context
  const { count } = useCounterContext();
  return <span>{count}</span>;
}

function App() {
  // wrap the component with provider
  return (
    <CounterProvider>
      <Count />
      <Button />
    </CounterProvider>
  );

4. Redux hooks

Redux是许多（即使不是全部） React 开发者都熟知的工具。它被用作整个应用程序的全局状态管理器。在 React 首次发布几个月后，它就加入了 Hooks 的功能。它通过现有的 connect() 方法为 HOC（高阶组件）模式提供了一种替代方案。

最值得注意的钩子包括：

useSelector
使用Dispatch
useStore

文档非常好，虽然有点复杂，但它会为您提供开始使用它们所需的任何信息。

使用示例：

import {useSelector, useDispatch} from "react-redux";
import React from "react";
import * as actions from "./actions";

const Example = () => {
const dispatch = useDispatch()
const counter = useSelector(state => state.counter)

return (
<div>
   <span>
     {counter.value}
   </span>
   <button onClick={() => dispatch(actions.incrementCounter)}>
     Counter +1
   </button>
</div>
);
};

5. React hook 表单

React hook form是一个表单钩子库，类似于 Formik 和 Redux form，但更胜一筹！凭借更简洁的语法、更快的速度、更少的重新渲染和更好的可维护性，它在 GitHub 上逐渐走红。
它体积小巧，并且在构建时充分考虑了性能。该库甚至提供了表单生成器，这真是太棒了！在 React hooks 库中，它的 GitHub 启动数量最多，达到了 14.8k。

使用示例：

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    // logs {firstName:"exampleFirstName", lastName:"exampleLastName"}
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstName" ref={register} />
      <input name="lastName" ref={register({ required: true })} />
      {errors.lastName && <span>"Last name is a required field."</span>}
      <input name="age" ref={register({ required: true })} />
      {errors.age && <span>"Please enter number for age."</span>}
      <input type="submit" />
    </form>
  );
}

6. 使用Debounce

useDebounce是一个用于去抖动的小钩子。它用于将函数执行推迟到稍后的时间。通常用于获取数据的输入和表单中。

使用示例：

import React, { useState } from "react";
import { useDebounce } from "use-debounce";

export default function Input() {
  const [text, setText] = useState("Hello");
  const [value] = useDebounce(text, 1000);

  return (
    <div>
      <input
        defaultValue={"Hello"}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Value: {text}</p>
      <p>Debounced value: {value}</p>
    </div>
  );
}

7. 使用本地存储

useLocalStorage和上面一样，是一个小钩子。它对于提取和设置 localStorage 中的数据非常有用。操作变得非常简单。
它提供自动 JSON 序列化和跨多个选项卡同步功能，并且是用 TypeScript 编写的，因此它提供了多种类型。

文档以高质量方式编写，并且通过扩展示例变得非常容易理解。

使用示例：

import React, { useState } from "react";
import { writeStorage } from '@rehooks/local-storage';

export default function Example() {
  let counter = 0;
  const [counterValue] = useLocalStorage('counterValue');

  return (
    <div>
      <span>{counterValue}</span>
      <button onClick={() => writeStorage('i', ++counter)}>
        Click Me
      </button>
    </div>
  );
}

8. 使用门户

usePortal让创建下拉菜单、模态框、通知弹窗、工具提示等功能变得超级简单！它支持在应用的 DOM 层级结构之外创建元素（点击此处查看 Portal 的工作原理）。
该钩子与 SSR 兼容，因为它是同构的。它使用 TypeScript 编写，并具有内置状态。它还提供完全自定义的 Portal 样式和大量其他选项。

为其编写的文档非常好，展示了许多示例，足以让您自己开始使用库/钩子。

使用示例：

import React, { useState } from "react";
import usePortal from "react-useportal";

const Example = () => {
    const { ref, openPortal, closePortal, isOpen, Portal } = usePortal()

    return (
      <>
         <button ref={ref} onClick={() => openPortal()}>
            Open Portal
         </button>
          {isOpen && (
            <Portal>
              <p>
                This Portal handles its own state.{' '}
                <button onClick={closePortal}>Close me!</button>, hit ESC or
                click outside of me.
              </p>
            </Portal>
          )}
       </>
 )
}

9. useHover

useHover是一个 React 状态钩子，用于判断 React 元素是否处于悬停状态。使用起来简单直观。这个库很小巧，使用简单，但如果你足够有创造力，它的功能会非常强大。

它还提供了悬停延迟效果。支持 TypeScript。文档虽然不够详细，但会向你展示如何使用它。

使用示例：

import useHover from "react-use-hover";

const Example = () => {
  const [isHovering, hoverProps] = useHover();
  return (
    <>
      <span {...hoverProps} aria-describedby="overlay">Hover me</span>
      {isHovering ? <div> I’m a little tooltip! </div> : null}
    </>
  );
}

10. React 路由器钩子

React Router是 React 最流行的库之一。它用于路由和获取应用程序 URL 历史记录等。它与 Redux 一起实现了获取此类有用数据的钩子。

提供的钩子有：

使用历史
使用位置
useParams
useRouteMatch

它的名称一目了然。UseHistory 会获取应用的历史记录数据以及一些方法，例如 push 会推送到新路由。UseLocation 会返回表示当前 URL 的对象。UseParams 会返回一个包含当前路由 URL 参数的键值对对象。最后，useRouteMatch 会尝试将当前 URL 与给定的 URL 进行匹配，该 URL 可以是字符串，也可以是包含不同选项的对象。

文档很好，并且包含许多示例

使用示例：

import { useHistory, useLocation, useRouteMatch } from "react-router-dom";

const Example = () => {
let history = useHistory();
let location = useLoction();
let isMatchingURL = useRouteMatch("/post/11");

function handleClick() {
history.push("/home");
}

return (
    <div>
        <span>Current URL: {location.pathname}</span>
        {isMatchingURL ? <span>Matching provided URL! Yay! </span> : null}
        <button type="button" onClick={handleClick}>
            Go home
        </button>
</div>
);
}

市面上还有很多钩子库，但我决定讨论这些。请尝试一下，我保证你不会后悔。如果你真的非常喜欢它们，请以任何方式支持它们。钩子仍然是一种相对较新的实现方式，但它们会一直存在。在接下来的几个月里，我们期待更多优秀的库和钩子示例浮出水面。

希望你觉得这篇文章有趣，并且学到了一些新东西。祝你进一步探索 Hooks 的乐趣！开发愉快。

查看我的其他一些内容！

如果你是 Hooks 世界的新手，请查看这篇文章

如果你有兴趣学习如何编写自定义钩子，请查看这个

或者如何在基于类的 React 项目中开始使用 Hooks，请点击此处

文章来源：https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065