【譯】值得推薦的十大React Hook 庫

時間 2020-10-28

標籤前端 react typescript redux 緩存 react-router dom async ide 工具欄目 React 简体版

原文原文鏈接

十大React Hook庫

原文地址：https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065

原文做者：Juraj Pavlović

譯者：培歌行（陽光是sunny）

React Hook來了，並在暴風雨中佔領了React社區。自最初發布以來已經有一段時間了，這意味着有不少支持庫。在搜索與React相關的內容時，很難不看到「 hook」這個詞語。若是你尚未遇到的話，應該儘快將它們加入代碼庫學習起來。它們將使您的編碼生活變得更加輕鬆和愉快。前端

在React開發中，保持乾淨的代碼風格，可讀性，可維護性，更少的代碼行以及可重用性相當重要。該博客將向您展現應當被當即開始使用的十大React Hook庫。不用再拖延了，讓咱們開始吧。react

1.use-http

use-http是一個很是有用的庫，可用來替代Fetch API。它使您的編碼更簡單易懂，更精確地講是數據操做部分。use-http自己使用TypeScript，甚至支持SSR和GraphQL。它返回響應，加載，錯誤數據和不一樣的請求方法，例如Get，Post，Put，Patch和Delete。typescript

它提供的主要功能是：

請求/響應攔截器
暫停（目前處於實驗狀態）
重發功能
緩存

CodeSandbox示例和Youtube視頻以及GitHub自述文件都對此進行了很好的記錄。redux

用法示例：緩存

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提供一個簡單的方法解決這個問題。這是一個可以準確跟蹤的感官鉤子。在任何應用程序或網站上，媒體查詢以及響應能力都很是重要。react-router

它以TypeScript編寫。該軟件包具備定義明確的文檔，它的用法以及測試方法也解釋的很是好。dom

用法示例：async

import useMedia from 'use-media';

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

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

3.Constate

Constate可將本地狀態提高到React Context。這意味着能夠以最小的努力輕鬆地將任何組件的任何狀態提高到上下文。若是您想在多個位置使用相同的狀態，或者爲多個組件提供相同的狀態，這頗有用。該名稱來自合併Context和state。
它是基於typescript實現的，並且庫很是的小。雖然該文檔不是很詳細，可是看例子，咱們就能夠輕易地學會使用。ide

用法示例：工具

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
useDispatch
useStore

該文檔很是好，雖然有點複雜，可是它將爲您提供開始使用它們所需的任何信息。

用法示例：

import  {useSelector, useDispatch} from "react-redux";
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是一個表單鉤子庫，相似於Formik和Redux表單，可是更好！憑藉其更簡單的語法，速度，更少的從新渲染數和更好的可維護性，它開始爬上GitHub的階梯。
它的體積很小，而且是考慮到性能而構建起來的。該庫甚至提供了很是棒的表單生成器！它是React鉤子庫中GitHub 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. useDebounce

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

useLocalStorage是一個小鉤子，與上面的鉤子同樣。它對於在localStorage中提取和設置數據很是有用。使用它以後操做變得很容易。

提供自動JSON序列化和同步的功能

文檔以高質量的方式編寫，而且經過擴展現例能夠徹底理解。

用法示例：

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

usePortal使得建立下拉菜單，彈出層，通知彈出窗口，提示等變得很是容易！它提供了在應用程序的DOM層次結構以外建立元素的功能。

它還提供了門戶樣式和大量其餘選項的徹底定製。

編寫的文檔很是好，其中展現了許多示例，這些示例足夠用於開始使用庫/本身作鉤子。

用法示例：

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

它肯定是否正在處於hover的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 router hooks

React router 是React最受歡迎的庫之一。它用於路由和獲取應用程序URL歷史記錄等。它與Redux一塊兒實現了用於獲取此類有用的數據

提供的掛鉤有：

useHistory
useLocation
useParams
useRouteMatch

它的名字很不言自明。UseHistory將獲取應用程序歷史記錄和方法的數據，例如push一個new route。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中玩得開心！發展愉快。

公衆號：《前端陽光》後臺回覆加羣，歡迎和大佬們交流技術

相關標籤/搜索