[[399441]]

本文轉載自微信公眾號「TianTianUp」，作者小弋。轉載本文請聯系TianTianUp公眾號。

大家好，我是TianTian。

今天分享的是值得關注的十大React Hook庫。

正文

React Hooks是一種函數類型，允許你鉤住React狀態和生命周期功能。這個功能在React 16.8更新中首次引入，從那時起，它已經成為任何React應用程序的一個重要組成部分。

因此，作為網絡開發者，我們應該知道實現React Hooks的最佳方法，本文將討論十大React Hook庫，可以很容易地用于你的下一個React項目。

在使用React鉤子時要記住的一點是，它們是可組合的。這意味著你應該把它們看作是可重用的有狀態邏輯構件，可以用來組成新的更大、更復雜的鉤子--就像你對UI組件一樣。

React Hook Form

React-Hook-Form是一個基于性能的靈活庫，具有易于用戶驗證和可擴展的形式。

可以說，這是目前使用最多的Hooks庫之一，它有一些驚人的功能，比如:

• 最大限度地減少重新渲染的次數，更快地安裝。
• 一個沒有任何依賴性的小庫。
• 它可以在沒有其他依賴性的情況下輕松采用。
• 專注于用戶體驗。
• 可維護性。
• 內建的表單驗證支持。

除了所有這些之外，React Hook表單庫每周大約有780,000次下載，并且有超過205,000個GitHub star。

這些統計信息還表明該庫的使用和流行程度，如果您想使用該庫，則可以使用npm和npm i react-hook-form命令輕松下載該庫。

以下代碼顯示了使用自定義React Form Hook useForm的示例，您可以使用其文檔獲取更多詳細信息:

import React from "react"; 
import useForm from "react-hook-form"; 
 
const fontstyle = { 
  fontSize: "15px" 
}; 
export default function Order() { 
  const { signup, handleSubmit, errors } = useForm(); 
  const onSubmit = data => {  // upload the data retreived from the form to a database, return value to a user, etc 
    console.log(data); 
  }; 
 
  return ( 
    <div> 
      <form onSubmit={handleSubmit(onSubmit)}> 
        <label>Full Name</label> 
        <input name="fullname" ref={signup} /> 
        <label>Product Name</label> 
        <input 
          name="productName" 
          ref={signup({ required: true, maxLength: 20 })} 
        /> 
 
        <select style={fontstyle} name="Title" ref={signup({ required: true })}> 
          <option value="">Select...</option> 
          <option value="One bundle">One bundle</option> 
          <option value="Two bundle">Two bundle</option> 
        </select> 
        <label> 
          <input type="checkbox" placeholder="Age 18+" name="Age 18+" ref={signup} />  
          Age Above 18 Years Only 
        </label> 
        {errors.productType && <p>Required Field</p>} 
        <input type="submit" value="Make the Payment" /> 
      </form> 
    </div> 
  ); 
} 

HookRouter

React HookRouter是一個很棒的庫，用于滿足您的應用程序的路由要求。

隨著項目的發展，對正式和便捷的路由系統的需求變得越來越重要。但是，您不必擔心，因為React為此提供了完美的解決方案。

盡管處于早期階段，但它有一些現有的功能來吸引開發者。我可以很容易地列出其中的一些功能

• 使用navigate(url, [replace], [queryParams])函數輕松實現編程導航。
• 在useRedirect()鉤子的支持下處理重定向。
• 使用輔助函數setLinkProps()創建自定義鏈接組件。
• 攔截導航意圖和受控攔截器。
• 通過setBasepath()設置基本路徑，在你的URLs開頭忽略某個路徑。

Hook Router是react-router的現代替代品，每周有4647次下載，大約有1.3k顆GitHub星。

您可以通過運行npm i hookrouter輕松安裝HookRouter，以下示例顯示了HookRouter的簡單用法。

// index.js or where you choose to render your entire app from 
import { useRoutes } from "hookrouter"; 
import Routes from "./router"; 
 
function App() { 
  const routes = useRoutes(Routes); 
  return <div>{routes}</div>; 
} 

注意：如果我們通常使用react-router，代碼行數可能會增加，因為我們必須為我們應用中的每個路由渲染組件并傳遞道具。現在只需導入Routes部分并將其傳遞給useRoutes Hook。

Use-Http

Use-Http是一個很棒的包，它作為Fetch API的替代品。

它是一個基于TypeScript的庫，它允許我們在提高可讀性的同時輕松地進行編碼，并強烈關注數據使用角度。

它提供的主要功能可以列舉如下:

• 支持服務器端渲染(SSR)和React-Native
• 支持GraphQL與useQuery和useMutation Hooks。
• 請求/響應攔截器。
• 暫停支持。
• 重試功能。
• 內置緩存和持久化緩存支持。

它目前的版本是1.0.20，每周有14,418次下載和1.8k個GitHub星級。

你可以通過運行npm i use-http命令使用npm來安裝它，下面的代碼顯示了一個使用useFetch鉤子的簡單例子。

import useFetch from "use-http" 
 
const OrderExample = () => { 
  const [orders, setOrders] = useState([]) 
  const { get, post, response, loading, error } = useFetch("https://ordering.com") 
   
  useEffect(() => { get("/orders") }, []) 
 
  const addOrder = async () => { 
      await post("/orders", { title: "example order" }); 
      if (response.ok) setOrders([...orders, newOrder]) 
  } 
 
  return ( 
    <> 
      <button onClick={addOrder}>Add Order</button> 
      {error && 'Error!'} 
      {loading && 'Loading...'} 
      {orders.map(order => ( 
        <span key={order.id}>{order.title}</span> 
      )} 
    </> 
  ); 
}; 

UseLocalStorage

UseLocalStorage鉤子允許我們將狀態同步到本地存儲中，以便在頁面刷新時保留這些狀態。

使用useLocalStorage鉤子，我們可以順利地處理本地存儲，它有一些有趣的功能，比如:

支持自動JSON序列化。

通過多個標簽進行同步。

支持TypeScript和Type hinting。

包括更新組件localStorage的功能和觸發組件外部的狀態更新。

這也是一個非常受歡迎的鉤子庫，每周約有14307次下載，GitHub星級超過21.9k。

文檔寫得很好，容易掌握，有大量的例子。

使用npm，安裝一如既往地簡單。你只需要運行npm i @rehooks/local-storage - save命令，然后你就可以嘗試下面的例子了。

import React from "react"; 
import { useLocalStorage } from '@rehooks/local-storage'; 
 
export default function App() { 
  const [value, setValue, remove] = useLocalStorage("key", "product"); 
 
  return ( 
    <div> 
      <div>Value: {value}</div> 
      <button onClick={() => setValue("Shampoo")}>Shampoo</button> 
      <button onClick={() => setValue("Conditioner")}>Conditioner</button> 
      <button onClick={() => remove()}>Remove</button> 
    </div> 
  ); 
} 

React-Use-Hover

useHover是React的一個狀態鉤子，用于指定一個React元素是否有懸停。該鉤子返回一個參考值和一個布爾值，指定該參考值的元素是否在此刻懸停。它只需將返回的引用添加到任何你想跟蹤的懸停狀態的元素中。

• 它提供的功能列舉如下:
• 它毫不費力地使用和理解。
• 該庫很小，易于使用。
• 它支持TypeScript。

為懸停效果提供了一個延遲。

它的周下載量只有2,339左右，GitHub星級為0.5k，但如果你創造性地使用它，它有很大的潛力。

你可以用npm install react-use-hover命令來安裝它，然后自己試試。

import useHover from "react-use-hover"; 
 
const Example = () => { 
  const [isHovering, hoverProps] = useHover(); 
  return ( 
    <> 
      <span {...hoverProps} aria-describedby="overlay">Hover pls</span> 
      {isHovering ? <div> Hey.. I am hovered! </div> : null} 
    </> 
  ); 
} 

UseMedia

useMedia是React的傳感器鉤子，用于跟蹤CSS媒體查詢的狀態。

你是否曾經需要一種方法來跟蹤CSS中的媒體查詢?use-media鉤子直接解決了這個問題，因為媒體查詢對于任何應用程序或網站的響應性都是極其關鍵的。

這個鉤子包括以下功能:

• 支持TypeScript。
• 該庫帶有良好的文檔，描述了如何使用該鉤子以及如何測試它。

useMedia鉤子每周有超過96,000次的下載，同時有415顆GitHub之星，目前是1.4.0版本。

你可以通過運行npm install --save use-mediacommand來使用npm來安裝它，下面的代碼顯示了一個使用useMediahook的簡單例子。

import useMedia from 'use-media'; 
 
const Example = () => { 
  const isWidth = useMedia({minWidth: '500px'}); 
 
  return ( 
    <span> 
      Page width is: {isWidth ? "WideScreen" : "NarrowScreen"} 
    </span> 
  ); 
}; 

React Recipes

React-recipes是一個擁有大量自定義Hooks的鉤子庫。

它包括用于使用瀏覽器API、管理狀態、運行異步代碼的鉤子。ode，并為我們帶來很多React沒有提供的功能。同樣重要的是，它是一個非常詳細和完善的文檔的庫。

到目前為止，react-recipes的總下載量超過了46.58k，GitHub上有470顆星。

你可以用npm i react-recipes --save命令安裝React-recipes，下面的例子展示了如何實現useSpeechSynthesis，讓你的瀏覽器說話。

import React, { useState } from "react"; 
import { useSpeechSynthesis } from "react-recipes"; 
 
export default function App() { 
  const [value, setValue] = useState(""); 
  const [ended, setEnded] = useState(false); 
  const onBoundary = (event) => { 
    console.log(`${event.name}: ${event.elapsedTime} milliseconds.`); 
  }; 
  const onEnd = () => setEnded(true); 
  const onError = (event) => { 
    console.warn(event); 
  }; 
 
  const { 
    cancel, 
    speak, 
    speaking, 
    supported, 
    voices, 
    pause, 
    resume 
  } = useSpeechSynthesis({ 
    onEnd, 
    onBoundary, 
    onError 
  }); 
 
  if (!supported) { 
    return "Voice Not Supported."; 
  } 
 
  return ( 
    <div> 
      <input value={value} onChange={(event) => setValue(event.target.value)} /> 
  /* makes the browser start speaking */ 
      <button 
        type="button" 
        onClick={() => speak({ text: value, voice: voices[1] })} 
      > 
        Speak Button 
      </button> 
/* cancels the speech synthesis */ 
      <button type="button" onClick={cancel}> 
        Cancel Button 
      </button> 
/*  lets us pause speaking */ 
      <button type="button" onClick={pause}> 
        Pause Button 
      </button> 
/* lets us resume speaking */ 
      <button type="button" onClick={resume}> 
        Resume Button 
      </button> 
      <p>{speaking && "Voice is speaking"}</p> 
      <p>{ended && "Voice has ended"}</p> 
      <div> 
        <h2>Voices:</h2> 
        <div> 
          {voices.map((voice) => ( 
            <p key={voice.name}>{voice.name}</p> 
          ))} 
        </div> 
      </div> 
    </div> 
  ); 
} 

UseDebounce

useDebounce是一個輕量級的鉤子，用來對對象進行調試。

你可以使用這個鉤子來去掉任何快速變化的值。它經常被用于獲取數據的輸入和表單中，它被用來延遲函數的執行。

它可能是最常用的React鉤子庫之一，每周有398,202次下載，大約有1.4k顆GitHub星。

你可以通過npm i use-debounce - save命令來安裝這個鉤子。

import React, { useState } from "react"; 
import { useDebounce } from "use-debounce"; 
 
export default function Input() { 
  const [text, setText] = useState("Hi"); 
  const [value] = useDebounce(text, 1000); 
 
  return ( 
    <div> 
      <input 
        defaultValue={"Hey There!"} 
        onChange={(e) => { 
          setText(e.target.value); 
        }} 
      /> 
      <p>Value: {text}</p> 
      <p>Debounced text: {value}</p> 
    </div> 
  ); 

Redux Hooks

React Redux包括它自己的自定義鉤子API，它允許你的React組件訂閱Redux商店和調度行動。

在你的React組件中，建議使用React-Redux鉤子API作為默認方法。

現有的connect API仍在工作，并將在未來得到支持，但hooks API更直接、更簡單，并且在TypeScript中表現良好。

以下是最重要的Redux Hooks。

• useSelector -使用選擇器函數讓你從Redux商店狀態中提取數據。
• useDispatch -這個鉤子從Redux商店返回一個對調度函數的引用。你可以根據需要使用它來調度行動。
• useStore -這個鉤子返回一個對同一個Redux商店的引用，不經常使用。

它在GitHub上有超過20.9k顆星，這表明它在React社區是多么受歡迎。

文檔是有益的--有時有點復雜，但它會給你所有的細節，你需要開始使用它們。

import {useSelector, useDispatch} from "react-redux"; 
import React from "react"; 
import * as actions from "./actions"; 
 
const ReduxExample = () => { 
const dispatch = useDispatch() 
const counter = useSelector(state => state.counter) 
 
return ( 
<div> 
   <span> 
     {counter.value} 
   </span> 
   <button onClick={() => dispatch(actions.incrementCounter)}> 
     Counter +1 Increment 
   </button> 
</div> 
); 
} 

UsePortal

React Portals提供了一種一流的方式，將子代渲染到存在于父代組件的DOM層次結構之外的DOM節點中。

下拉、模態、通知彈出、工具提示都可以用usePortal簡單創建。它還允許在應用程序的DOM層次結構之外的元素存在。

usePortal的版本號為1.0.14，每周下載量約為17754，GitHub星級超過700。

你可以通過運行npm i -S react-useportal命令使用npm來安裝它，下面的代碼顯示了一個使用usePortalhook的簡單例子。

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 The Portal!</button>, Press ESC or 
           click outside of me. 
         </p> 
       </Portal> 
     )} 
       </> 
 ) 
}