2021 年你应该使用的 9 个 React Hook 的库

Hooks 在刚发布的时候就迅速占领了 React 社区，而且它现在已经有了很多支持 Hook 的库。如果你在搜索引擎中搜索 React，已经很难不出现 Hook 这个关键字了。如果你现在还没有使用 Hook，你要抓紧在你的项目代码中加入 hook了，因为它实在是可以让你的编程变得简单又有趣。

保持干净的代码风格、可读性、可维护性、更少的代码量以及可重用性在React开发中至关重要。这个博客将向你展示你应该立即开始使用的 10 个关于 React Hook 的库。这个选择基于个人偏好。废话不多说，让我们开始吧。

1. use-http

use-http 是一个非常有用的包，用于替代 Fetch API。它的代码质量很高，而且维护很频繁。它让您的代码更加简单易懂，特别是在数据操作的部分。 这个库的源码本身使用 TypeScript 编写，甚至支持 SSR（服务器端渲染） 和 GraphQL。它返回响应、加载、错误数据和不同的请求方法，如 Get、Post、Put、Patch和Delete。

它提供的主要特点是:

• 请求/响应拦截器
• Suspense (目前正在实验中)
• 重试功能
• 缓存

使用示例:

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. useMedia

您是否需要一种跟踪 CSS 媒体查询的方法？useMedia hook 提供了一个简单的方法来解决这个问题。 媒体查询在响应式网站中发挥着至关重要的作用。

它的源码使用 TypeScript 编写，提供支持 TypeScript。 这个库有详尽的文档来解释它的用法。

使用示例:

import useMedia from 'use-media';

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

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

3. Constate

Constate 这个库可以把 state 和 React Context 结合在一起. 这个意识着可以轻易地将组件上的 state 数据链接到 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 社区发布 Hook 几个月后，Redux 就加入了 Hook 的支持。这个 Hook 可以用于代替之前的高阶组件方法 connect()。

提供的最引人注目的 Hook 是:

• useSelector
• useDispatch
• 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 form

React hook form 是一个关于表单的 hook，有点像 Formik 和 Redux form，但是比它们更好！

凭借其更简单的语法、速度、更少的重新渲染和更好的可维护性，它开始在 GitHub 中登顶。

它体积小，注重性能。这个库甚至提供了它的表单生成器，这很棒!

在 React hook 中的库，它的 star 量最高，有 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. useLocalStorage

useLocalStorage 是一个小 的 hook，就像上面的那个一样。它对于提取和设置localStorage中的数据非常有用，操作很容易，并使用 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>
  );
}

7. usePortal

usePortal 使下拉菜单、模态框、通知弹出窗口、气泡提示框等的创建变得非常容易!

它提供了在应用程序的DOM层次结构之外创建元素的方法。

源码使用 TypeScript 编写，它的文档非常好，显示了许多示例，这些示例足以让您自己开始使用这个库。

使用示例:

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

8. useHover

useHover 是一个侦测鼠标悬浮在某些元素时使用的一个 hook。

它的使用简单直观，而且该库很小，但如果你足够有创造力，它会很强大。

它也提供了悬停效果的延迟，支持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}
    </>
  );
}

9. React router hooks

React router 是最受欢迎的 React 库之一, 它用于路由和获取应用程序URL历史记录等。

与 Redux 结合在一起使用，它提供了获取这些有用数据的 hook。

提供的 hook 有:

• useHistory
• useLocation
• useParams
• useRouteMatch

它的名字不言自明。

UseHistory 将获取应用程序历史记录的数据的方法。

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

希望你发现这篇文章很有趣，并且你学到了一些新的东西。祝您进一步探索 hook 玩得开心。