React Hook來(lái)了，并在暴風(fēng)雨中占領(lǐng)了React社區(qū)。自最初發(fā)布以來(lái)已經(jīng)有一段時(shí)間了，這意味著有很多支持庫(kù)。在搜索與React相關(guān)的內(nèi)容時(shí)，很難不看到“ hook”這個(gè)詞語(yǔ)。如果你還沒有遇到的話，應(yīng)該盡快將它們加入代碼庫(kù)學(xué)習(xí)起來(lái)。它們將使您的編碼生活變得更加輕松和愉快。

在React開發(fā)中，保持干凈的代碼風(fēng)格，可讀性，可維護(hù)性，更少的代碼行以及可重用性至關(guān)重要。該博客將向您展示應(yīng)當(dāng)被立即開始使用的 十大React Hook庫(kù) 。不用再拖延了，讓我們開始吧。

1.use-http

use-http 是一個(gè)非常有用的庫(kù)，可用來(lái)替代Fetch API。它使您的編碼更簡(jiǎn)單易懂，更精確地講是數(shù)據(jù)操作部分。 use-http 本身使用TypeScript，甚至支持SSR和GraphQL。它返回響應(yīng)，加載，錯(cuò)誤數(shù)據(jù)和不同的請(qǐng)求方法，例如Get，Post，Put，Patch和Delete。

它提供的主要功能是：

• 請(qǐng)求/響應(yīng)攔截器
• 暫停（目前處于實(shí)驗(yàn)狀態(tài)）
• 重發(fā)功能
• 緩存

CodeSandbox示例和Youtube視頻以及GitHub自述文件都對(duì)此進(jìn)行了很好的記錄。

用法示例：

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

您是否需要一種跟蹤C(jī)SS媒體查詢的方法？useMedia提供一個(gè)簡(jiǎn)單的方法解決這個(gè)問題。這是一個(gè)能夠準(zhǔn)確跟蹤的感官鉤子。在任何應(yīng)用程序或網(wǎng)站上，媒體查詢以及響應(yīng)能力都非常重要。

它以TypeScript編寫。該軟件包具有定義明確的文檔，它的用法以及測(cè)試方法也解釋的非常好。

用法示例：

import useMedia from 'use-media'; 
 
const Example = () => { 
  const isWide = useMedia({minWidth: '1000px'}); 
 
  return ( 
    <span> 
      Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"} 
    </span> 
  ); 
}; 

3.Constate

Constate可將本地狀態(tài)提升到React Context。這意味著可以以最小的努力輕松地將任何組件的任何狀態(tài)提升到上下文。如果您想在多個(gè)位置使用相同的狀態(tài)，或者為多個(gè)組件提供相同的狀態(tài)，這很有用。該名稱來(lái)自合并 Con text和 state 。

它是基于typescript實(shí)現(xiàn)的，而且?guī)旆浅５男　ｋm然該文檔不是很詳細(xì)，但是看例子，我們就可以輕易地學(xué)會(huì)使用。

用法示例：

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開發(fā)人員的知名工具。在整個(gè)應(yīng)用程序中，它用作全局狀態(tài)管理器。在React的最初版本發(fā)布幾個(gè)月后，它就隨hooks而出現(xiàn)了。它通過利用現(xiàn)有的connect（）方法 提供了 一種 替代HOC（高階組件）模式的方法。

提供的最著名的掛鉤是：

• useSelector
• useDispatch
• useStore

該文檔非常好，雖然有點(diǎn)復(fù)雜，但是它將為您提供開始使用它們所需的任何信息。

用法示例：

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 是一個(gè)表單鉤子庫(kù)，類似于Formik和Redux表單，但是更好！憑借其更簡(jiǎn)單的語(yǔ)法，速度，更少的重新渲染數(shù)和更好的可維護(hù)性，它開始爬上GitHub的階梯。

它的體積很小，并且是考慮到性能而構(gòu)建起來(lái)的。該庫(kù)甚至提供了非常棒的表單生成器！它是React鉤子庫(kù)中GitHub star數(shù)量最多的庫(kù)之一（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表示一個(gè)用于防抖的小鉤子。它用于將功能的執(zhí)行推遲到以后。常用于獲取數(shù)據(jù)的輸入框和表格中。

用法示例：

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是一個(gè)小鉤子，與上面的鉤子一樣。它對(duì)于在localStorage中提取和設(shè)置數(shù)據(jù)非常有用。使用它之后操作變得很容易。

提供自動(dòng)JSON序列化和同步的功能

文檔以高質(zhì)量的方式編寫，并且通過擴(kuò)展示例可以完全理解。

用法示例：

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使得創(chuàng)建下拉菜單，彈出層，通知彈出窗口，提示等變得非常容易！它提供了在應(yīng)用程序的DOM層次結(jié)構(gòu)之外創(chuàng)建元素的功能。

它還提供了門戶樣式和大量其他選項(xiàng)的完全定制。

編寫的文檔非常好，其中展示了許多示例，這些示例足夠用于開始使用庫(kù)/自己做鉤子。

用法示例：

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元素。簡(jiǎn)單易用。該庫(kù)很小，易于使用，但如果您有足夠的創(chuàng)造力，它可能會(huì)很強(qiáng)大。

它還提供了懸停效果的延遲功能。支持TypeScript。雖然文檔沒有那么詳細(xì)，但是它將向您展示如何正確地使用它。

用法示例：

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最受歡迎的庫(kù)之一。它用于路由和獲取應(yīng)用程序URL歷史記錄等。它與Redux一起實(shí)現(xiàn)了用于獲取此類有用的數(shù)據(jù)。

提供的掛鉤有：

• useHistory
• useLocation
• useParams
• useRouteMatch

它的名字很不言自明。UseHistory將獲取應(yīng)用程序歷史記錄和方法的數(shù)據(jù)，例如push一個(gè)new route。UseLocation將返回代表當(dāng)前URL的對(duì)象。UseParams將返回當(dāng)前URL的參數(shù)的鍵-值對(duì)的對(duì)象。最后，useRouteMatch將嘗試將當(dāng)前URL與給定URL進(jìn)行匹配，給定URL可以是字符串，也可以是具有不同選項(xiàng)的對(duì)象。

文檔很好，寫了很多例子。

用法示例：

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

還有更多的鉤子庫(kù)，但是這些是我決定要談?wù)摰?。?qǐng)嘗試一下，我保證您不會(huì)后悔。如果您確實(shí)很喜歡它們，請(qǐng)以任何方式去支持他們。hooks仍然是執(zhí)行此操作的一種相對(duì)較新的方法。在接下來(lái)的幾個(gè)月中，我們希望有更多出色的庫(kù)和鉤子示例浮出水面。

希望您發(fā)現(xiàn)這篇文章有趣，并且您學(xué)到了一些新東西。在進(jìn)一步探索hooks中玩得開心！發(fā)展愉快。