好看的课外书,有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

譯文 | 值得推薦的十大 React Hook 庫

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

創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|成都網(wǎng)站維護公司|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù)，案例作品覆蓋水泥攪拌車等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身策劃品質(zhì)網(wǎng)站。

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

1.use-http

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

它提供的主要功能是：

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

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

用法示例：

 
 
 
   
  
  
  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 (   
  
  
      <>   
  
  
        Add Todo   
  
  
        {error && 'Error!'}   
  
  
        {loading && 'Loading...'}   
  
  
        {todos.map(todo => (   
  
  
          {todo.title}   
  
  
        )}   
  
  
         
  
  
    );   
  
  
  };

2. useMedia

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

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

用法示例：

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

3.Constate

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

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

用法示例：

 
 
 
   
  
  
  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 +;   
  
  
  }   
  
  
     
  
  
  function Count() {   
  
  
    // use the context   
  
  
    const { count } = useCounterContext();   
  
  
    return {count};   
  
  
  }   
  
  
     
  
  
  function App() {   
  
  
    // wrap the component with provider   
  
  
    return (   
  
  
         
  
  
           
  
  
           
  
  
         
  
  
    );

4. Redux hooks

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

提供的最著名的掛鉤是：

useSelector
useDispatch
useStore

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

用法示例：

 
 
 
   
  
  
  import  {useSelector, useDispatch} from "react-redux";   
  
  
  import * as actions from "./actions";   
  
  
     
  
  
  const Example = () => {   
  
  
  const dispatch = useDispatch()   
  
  
  const counter = useSelector(state => state.counter)   
  
  
     
  
  
  return (   
  
  
     
  
  
        
  
  
       {counter.value}   
  
  
        
  
  
      dispatch(actions.incrementCounter)}>   
  
  
       Counter +1

);

};

5. React hook form

React hook form 是一個表單鉤子庫，類似于Formik和Redux表單，但是更好！憑借其更簡單的語法，速度，更少的重新渲染數(shù)和更好的可維護性，它開始爬上GitHub的階梯。

它的體積很小，并且是考慮到性能而構(gòu)建起來的。該庫甚至提供了非常棒的表單生成器！它是React鉤子庫中GitHub star數(shù)量最多的庫之一（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 (   
  
  
         
  
  
           
  
  
           
  
  
        {errors.lastName && "Last name is a required field."}   
  
  
           
  
  
        {errors.age && "Please enter number for age."}   
  
  
           
  
  
         
  
  
    );   
  
  
  }

6. useDebounce

useDebounce表示一個用于防抖的小鉤子。它用于將功能的執(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 (   
  
  
         
  
  
          
  
  
  
        defaultValue={"Hello"}   
  
  
          onChange={(e) => {   
  
  
            setText(e.target.value);   
  
  
          }}   
  
  
        />   
  
  
        Value: {text}
   
  
  
        Debounced value: {value}

);

}

7. useLocalStorage

useLocalStorage是一個小鉤子，與上面的鉤子一樣。它對于在localStorage中提取和設(shè)置數(shù)據(jù)非常有用。使用它之后操作變得很容易。

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

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

用法示例：

 
 
 
   
  
  
  import React, { useState } from "react";   
  
  
  import { writeStorage } from '@rehooks/local-storage';   
  
  
     
  
  
  export default function Example() {   
  
  
    let counter = 0;   
  
  
    const [counterValue] = useLocalStorage('counterValue');   
  
  
     
  
  
    return (   
  
  
         
  
  
        {counterValue}   
  
  
         writeStorage('i', ++counter)}>   
  
  
          Click Me

);

}

8. usePortal

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

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

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

用法示例：

 
 
 
   
  
  
  import React, { useState } from "react";   
  
  
  import usePortal from "react-useportal";   
  
  
     
  
  
  const Example = () => {   
  
  
      const { ref, openPortal, closePortal, isOpen, Portal } = usePortal()   
  
  
     
  
  
      return (   
  
  
        <>   
  
  
            openPortal()}>   
  
  
              Open Portal   
  
  
              
  
  
            {isOpen && (   
  
  
                 
  
  
                   
  
  
                  This Portal handles its own state.{' '}   
  
  
                  Close me!, hit ESC or   
  
  
                  click outside of me.   
  
  
                
   
  
  
                 
  
  
            )}   
  
  
            
  
  
   )   
  
  
  }

9. useHover

它確定是否正在處于hover的React元素。簡單易用。該庫很小，易于使用，但如果您有足夠的創(chuàng)造力，它可能會很強大。

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

用法示例：

 
 
 
   
  
  
  import useHover from "react-use-hover";   
  
  
     
  
  
  const Example = () => {   
  
  
    const [isHovering, hoverProps] = useHover();   
  
  
    return (   
  
  
      <>   
  
  
        Hover me   
  
  
        {isHovering ?  I’m a little tooltip! 
 : null}   
  
  
         
  
  
    );   
  
  
  }

10. React router hooks

React router 是React最受歡迎的庫之一。它用于路由和獲取應(yīng)用程序URL歷史記錄等。它與Redux一起實現(xiàn)了用于獲取此類有用的數(shù)據(jù)。

提供的掛鉤有：

useHistory
useLocation
useParams
useRouteMatch

它的名字很不言自明。UseHistory將獲取應(yīng)用程序歷史記錄和方法的數(shù)據(jù)，例如push一個new route。UseLocation將返回代表當前URL的對象。UseParams將返回當前URL的參數(shù)的鍵-值對的對象。最后，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 (   
  
  
         
  
  
          Current URL: {location.pathname}   
  
  
          {isMatchingURL ? Matching provided URL! Yay!  : null}   
  
  
             
  
  
              Go home

);

}

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

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

文章名稱：譯文 | 值得推薦的十大 React Hook 庫
當前路徑：http://fisionsoft.com.cn/article/djhsdsp.html

新聞中心

1.use-http

它提供的主要功能是：

2. useMedia

3.Constate

4. Redux hooks

5. React hook form

6. useDebounce

7. useLocalStorage

8. usePortal

9. useHover

10. React router hooks

其他資訊