[[399441]]

本文轉(zhuǎn)載自微信公眾號(hào)「TianTianUp」，作者小弋。轉(zhuǎn)載本文請(qǐng)聯(lián)系TianTianUp公眾號(hào)。

大家好，我是TianTian。

今天分享的是值得關(guān)注的十大React Hook庫(kù)。

正文

React Hooks是一種函數(shù)類(lèi)型，允許你鉤住React狀態(tài)和生命周期功能。這個(gè)功能在React 16.8更新中首次引入，從那時(shí)起，它已經(jīng)成為任何React應(yīng)用程序的一個(gè)重要組成部分。

因此，作為網(wǎng)絡(luò)開(kāi)發(fā)者，我們應(yīng)該知道實(shí)現(xiàn)React Hooks的最佳方法，本文將討論十大React Hook庫(kù)，可以很容易地用于你的下一個(gè)React項(xiàng)目。

在使用React鉤子時(shí)要記住的一點(diǎn)是，它們是可組合的。這意味著你應(yīng)該把它們看作是可重用的有狀態(tài)邏輯構(gòu)件，可以用來(lái)組成新的更大、更復(fù)雜的鉤子--就像你對(duì)UI組件一樣。

React Hook Form

React-Hook-Form是一個(gè)基于性能的靈活庫(kù)，具有易于用戶(hù)驗(yàn)證和可擴(kuò)展的形式。

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

• 最大限度地減少重新渲染的次數(shù)，更快地安裝。
• 一個(gè)沒(méi)有任何依賴(lài)性的小庫(kù)。
• 它可以在沒(méi)有其他依賴(lài)性的情況下輕松采用。
• 專(zhuān)注于用戶(hù)體驗(yàn)。
• 可維護(hù)性。
• 內(nèi)建的表單驗(yàn)證支持。

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

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

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

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是一個(gè)很棒的庫(kù)，用于滿(mǎn)足您的應(yīng)用程序的路由要求。

隨著項(xiàng)目的發(fā)展，對(duì)正式和便捷的路由系統(tǒng)的需求變得越來(lái)越重要。但是，您不必?fù)?dān)心，因?yàn)镽eact為此提供了完美的解決方案。

盡管處于早期階段，但它有一些現(xiàn)有的功能來(lái)吸引開(kāi)發(fā)者。我可以很容易地列出其中的一些功能

• 使用navigate(url, [replace], [queryParams])函數(shù)輕松實(shí)現(xiàn)編程導(dǎo)航。
• 在useRedirect()鉤子的支持下處理重定向。
• 使用輔助函數(shù)setLinkProps()創(chuàng)建自定義鏈接組件。
• 攔截導(dǎo)航意圖和受控?cái)r截器。
• 通過(guò)setBasepath()設(shè)置基本路徑，在你的URLs開(kāi)頭忽略某個(gè)路徑。

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

您可以通過(guò)運(yùn)行npm i hookrouter輕松安裝HookRouter，以下示例顯示了HookRouter的簡(jiǎn)單用法。

// 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，代碼行數(shù)可能會(huì)增加，因?yàn)槲覀儽仨殲槲覀儜?yīng)用中的每個(gè)路由渲染組件并傳遞道具?，F(xiàn)在只需導(dǎo)入Routes部分并將其傳遞給useRoutes Hook。

Use-Http

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

它是一個(gè)基于TypeScript的庫(kù)，它允許我們?cè)谔岣呖勺x性的同時(shí)輕松地進(jìn)行編碼，并強(qiáng)烈關(guān)注數(shù)據(jù)使用角度。

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

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

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

你可以通過(guò)運(yùn)行npm i use-http命令使用npm來(lái)安裝它，下面的代碼顯示了一個(gè)使用useFetch鉤子的簡(jiǎn)單例子。

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鉤子允許我們將狀態(tài)同步到本地存儲(chǔ)中，以便在頁(yè)面刷新時(shí)保留這些狀態(tài)。

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

支持自動(dòng)JSON序列化。

通過(guò)多個(gè)標(biāo)簽進(jìn)行同步。

支持TypeScript和Type hinting。

包括更新組件localStorage的功能和觸發(fā)組件外部的狀態(tài)更新。

這也是一個(gè)非常受歡迎的鉤子庫(kù)，每周約有14307次下載，GitHub星級(jí)超過(guò)21.9k。

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

使用npm，安裝一如既往地簡(jiǎn)單。你只需要運(yùn)行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的一個(gè)狀態(tài)鉤子，用于指定一個(gè)React元素是否有懸停。該鉤子返回一個(gè)參考值和一個(gè)布爾值，指定該參考值的元素是否在此刻懸停。它只需將返回的引用添加到任何你想跟蹤的懸停狀態(tài)的元素中。

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

為懸停效果提供了一個(gè)延遲。

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

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

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的傳感器鉤子，用于跟蹤C(jī)SS媒體查詢(xún)的狀態(tài)。

你是否曾經(jīng)需要一種方法來(lái)跟蹤C(jī)SS中的媒體查詢(xún)?use-media鉤子直接解決了這個(gè)問(wèn)題，因?yàn)槊襟w查詢(xún)對(duì)于任何應(yīng)用程序或網(wǎng)站的響應(yīng)性都是極其關(guān)鍵的。

這個(gè)鉤子包括以下功能:

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

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

你可以通過(guò)運(yùn)行npm install --save use-mediacommand來(lái)使用npm來(lái)安裝它，下面的代碼顯示了一個(gè)使用useMediahook的簡(jiǎn)單例子。

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是一個(gè)擁有大量自定義Hooks的鉤子庫(kù)。

它包括用于使用瀏覽器API、管理狀態(tài)、運(yùn)行異步代碼的鉤子。ode，并為我們帶來(lái)很多React沒(méi)有提供的功能。同樣重要的是，它是一個(gè)非常詳細(xì)和完善的文檔的庫(kù)。

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

你可以用npm i react-recipes --save命令安裝React-recipes，下面的例子展示了如何實(shí)現(xiàn)useSpeechSynthesis，讓你的瀏覽器說(shuō)話(huà)。

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是一個(gè)輕量級(jí)的鉤子，用來(lái)對(duì)對(duì)象進(jìn)行調(diào)試。

你可以使用這個(gè)鉤子來(lái)去掉任何快速變化的值。它經(jīng)常被用于獲取數(shù)據(jù)的輸入和表單中，它被用來(lái)延遲函數(shù)的執(zhí)行。

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

你可以通過(guò)npm i use-debounce - save命令來(lái)安裝這個(gè)鉤子。

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商店和調(diào)度行動(dòng)。

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

現(xiàn)有的connect API仍在工作，并將在未來(lái)得到支持，但hooks API更直接、更簡(jiǎn)單，并且在TypeScript中表現(xiàn)良好。

以下是最重要的Redux Hooks。

• useSelector -使用選擇器函數(shù)讓你從Redux商店?duì)顟B(tài)中提取數(shù)據(jù)。
• useDispatch -這個(gè)鉤子從Redux商店返回一個(gè)對(duì)調(diào)度函數(shù)的引用。你可以根據(jù)需要使用它來(lái)調(diào)度行動(dòng)。
• useStore -這個(gè)鉤子返回一個(gè)對(duì)同一個(gè)Redux商店的引用，不經(jīng)常使用。

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

文檔是有益的--有時(shí)有點(diǎn)復(fù)雜，但它會(huì)給你所有的細(xì)節(jié)，你需要開(kāi)始使用它們。

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層次結(jié)構(gòu)之外的DOM節(jié)點(diǎn)中。

下拉、模態(tài)、通知彈出、工具提示都可以用usePortal簡(jiǎn)單創(chuàng)建。它還允許在應(yīng)用程序的DOM層次結(jié)構(gòu)之外的元素存在。

usePortal的版本號(hào)為1.0.14，每周下載量約為17754，GitHub星級(jí)超過(guò)700。

你可以通過(guò)運(yùn)行npm i -S react-useportal命令使用npm來(lái)安裝它，下面的代碼顯示了一個(gè)使用usePortalhook的簡(jiǎn)單例子。

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