本篇內(nèi)容介紹了“有哪些React Hook庫”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
在中山等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站建設 網(wǎng)站設計制作按需開發(fā)網(wǎng)站,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,成都品牌網(wǎng)站建設,營銷型網(wǎng)站建設,成都外貿(mào)網(wǎng)站制作,中山網(wǎng)站建設費用合理。
1.use-http
use-http是一個非常有用的軟件包，可用來替代Fetch API。以高質(zhì)量編寫和維護。它使您的編碼更簡單易懂，更精確地講是數(shù)據(jù)處理部分。hook本身使用TypeScript，甚至支持SSR和GraphQL。它返回響應，加載，錯誤數(shù)據(jù)和不同的請求方法，例如Get，Post，Put，Patch和Delete。
它提供的主要功能是：
請求/響應攔截器
支持React Native
卸載組件時中止/取消掛起的http請求
緩存
CodeSandbox示例和Youtube視頻以及GitHub自述文件都對此進行了很好的記錄。
官網(wǎng)地址:https://use-http.com/#/
使用案例
重慶分公司
重慶分公司
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 hook提供一個簡單的方法解決問題。這是一個準確跟蹤React sensor hook。媒體查詢以及任何應用程序或網(wǎng)站的響應能力都非常重要。
它提供了支持TypeScript編寫。該軟件包具有定義明確的文檔，其中解釋了掛鉤的用法以及測試方法。
地址:https://github.com/streamich/use-media
使用案例:
import useMedia from 'use-media'; const Example = () => { const isWide = useMedia({minWidth: '1000px'}); return ( Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"} ); };3.Constate
Constate是一個hook package，可將本地狀態(tài)提升到React Context。這意味著可以以最小的努力輕松地將任何組件的任何狀態(tài)提升到上下文。如果您想在多個位置使用相同的狀態(tài)，或者為多個組件提供相同的狀態(tài)，這很有用。該名稱來自合并上下文和狀態(tài)的文字游戲。使用Typescript寫的，體積很小。雖然該文檔不是很詳細，但是可以完成工作。
地址:https://github.com/diegohaz/constate
使用案例:
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ā)人員的知名工具。在整個應用程序中，它用作全局狀態(tài)管理器。在React的最初版本發(fā)布幾個月后，它就隨鉤而上了。它通過現(xiàn)有connect（）方法提供了HOC（高階組件）模式的替代方法。
提供的最著名的hooks是：
useSelector
useDispatch
useStore
該文檔非常好，有點復雜，但是它將為您提供開始使用它們所需的任何信息。
地址:https://github.com/reduxjs/redux
使用案例：
import {useSelector, useDispatch} from "react-redux"; import React from "react"; 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表單相似的表單校驗hook庫，但是更好！憑借其更簡單的語法，速度，更少的轉(zhuǎn)譯和更好的可維護性，它開始爬上GitHub的階梯。它的體積很小，并且考慮到性能而構(gòu)建。該庫甚至提供了它的表單生成器，這很棒！它是React鉤子庫（14.8k）中GitHub啟動數(shù)量最多的平臺之一。
它提供的主要功能:
非受控表單校驗
以性能和開發(fā)體驗為基礎構(gòu)建
迷你的體積而沒有其他依賴
遵循 html 標準進行校驗
與 React Native 兼容
支持瀏覽器原生校驗
地址:https://github.com/react-hook-form/react-hook-form
使用案例：
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 ( 6.useDebounce
useDebounce 表示一個用于去抖的小鉤子。它用于將功能執(zhí)行推遲到以后。常用于獲取數(shù)據(jù)的輸入和表格中。
地址:https://github.com/xnimorz/use-debounce
使用案例:
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 ( { setText(e.target.value); }} /> Value: {text}
Debounced value: {value}
); }7.useLocalStorage
useLocalStorage是一個小鉤子，與上面的鉤子一樣。這對于在localStorage中提取和設置數(shù)據(jù)非常有用。操作變得容易。提供跨多個選項卡的自動JSON序列化和同步，并以TypeScript編寫，因此它提供了類型。
文檔以高質(zhì)量的方式編寫，并且可以通過擴展示例來很好地理解。
地址:https://github.com/rehooks/local-storage
使用案例:
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)建下拉菜單，模態(tài)，通知彈出窗口，工具提示等變得非常容易！它提供了在應用程序的DOM層次結(jié)構(gòu)之外創(chuàng)建元素的信息（react docs）。該鉤子與SSR一起使用，因為它是同構(gòu)的。用TypeScript編寫并具有內(nèi)置狀態(tài)。它還提供了portals樣式和大量其他選項的完全定制。
為此編寫的文檔非常好，其中顯示了許多示例，這些示例對于開始使用庫/自己做鉤子來說綽綽有余。
地址:https://github.com/alex-cory/react-useportal
使用案例:
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
useHover是一個React state hook，它確定是否正在hover React元素。簡單易用。該庫很小，易于使用，但如果您有足夠的創(chuàng)造力，它可能會很強大。
它還提供了懸停效果的延遲。支持TypeScript。文檔沒有那么詳細，但是它將向您展示如何正確地使用它。
地址:https://github.com/andrewbranch/react-use-hover
使用案例:
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 hooks是React最受歡迎的庫之一。它用于路由和獲取應用程序URL歷史記錄等。它與Redux一起實現(xiàn)了用于獲取此類有用數(shù)據(jù)的hook。
它提供的主要功能是：
useHistory
useLocation
useParams
useRouteMatch
它的名字很不言自明。UseHistory將獲取應用程序歷史記錄和方法的數(shù)據(jù)，例如push推送到新路由。UseLocation將返回代表當前URL的對象。UseParams將返回當前路徑的URL參數(shù)的鍵-值對的對象。最后，useRouteMatch將嘗試將當前URL與給定URL進行匹配，給定URL可以是字符串，也可以是具有不同選項的對象。
文檔很好，寫了很多例子
地址:https://github.com/ReactTraining/react-router
使用案例:
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 ); }11.react-use
react-use是一個必不可少的 React Hooks集合.你需要安裝React 16.8.0或更高版本才能使用Hooks API。
地址:github.com/streamich/react-use
使用案例:
import {useBattery} from 'react-use'; const Demo = () => { const state = useBattery(); return ( {JSON.stringify(state, null, 2)} ); };當前還有更多的鉤子庫，找到適合自己使用的就是最好的，不僅提高了開發(fā)的效率，而且讓代碼更加整潔,簡單。
“有哪些React Hook庫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
