推薦一些值得關注的React Hook庫
今天分享的是值得關注的十大React Hook庫。
正文
React Hooks是一種函數(shù)類型，允許你鉤住React狀態(tài)和生命周期功能。這個功能在React 16.8更新中首次引入，從那時起，它已經(jīng)成為任何React應用程序的一個重要組成部分。
因此，作為網(wǎng)絡開發(fā)者，我們應該知道實現(xiàn)React Hooks的最佳方法，本文將討論十大React Hook庫，可以很容易地用于你的下一個React項目。
在使用React鉤子時要記住的一點是，它們是可組合的。這意味著你應該把它們看作是可重用的有狀態(tài)邏輯構件，可以用來組成新的更大、更復雜的鉤子--就像你對UI組件一樣。
React Hook Form
React-Hook-Form是一個基于性能的靈活庫，具有易于用戶驗證和可擴展的形式。
可以說，這是目前使用最多的Hooks庫之一，它有一些驚人的功能，比如:
最大限度地減少重新渲染的次數(shù)，更快地安裝。 一個沒有任何依賴性的小庫。 它可以在沒有其他依賴性的情況下輕松采用。 專注于用戶體驗。 可維護性。 內建的表單驗證支持。
除了所有這些之外，React Hook表單庫每周大約有780,000次下載，并且有超過205,000個GitHub star。
這些統(tǒng)計信息還表明該庫的使用和流行程度，如果您想使用該庫，則可以使用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是一個很棒的庫，用于滿足您的應用程序的路由要求。
隨著項目的發(fā)展，對正式和便捷的路由系統(tǒng)的需求變得越來越重要。但是，您不必擔心，因為React為此提供了完美的解決方案。
盡管處于早期階段，但它有一些現(xiàn)有的功能來吸引開發(fā)者。我可以很容易地列出其中的一些功能
使用navigate(url, [replace], [queryParams])函數(shù)輕松實現(xiàn)編程導航。 在useRedirect()鉤子的支持下處理重定向。 使用輔助函數(shù)setLinkProps()創(chuàng)建自定義鏈接組件。 攔截導航意圖和受控攔截器。 通過setBasepath()設置基本路徑，在你的URLs開頭忽略某個路徑。
Hook Router是react-router的現(xiàn)代替代品，每周有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，代碼行數(shù)可能會增加，因為我們必須為我們應用中的每個路由渲染
組件并傳遞道具?，F(xiàn)在只需導入Routes部分并將其傳遞給useRoutes Hook。
Use-Http
Use-Http是一個很棒的包，它作為Fetch API的替代品。
它是一個基于TypeScript的庫，它允許我們在提高可讀性的同時輕松地進行編碼，并強烈關注數(shù)據(jù)使用角度。
它提供的主要功能可以列舉如下:
支持服務器端渲染（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鉤子允許我們將狀態(tài)同步到本地存儲中，以便在頁面刷新時保留這些狀態(tài)。
使用useLocalStorage鉤子，我們可以順利地處理本地存儲，它有一些有趣的功能，比如:
支持自動JSON序列化。 通過多個標簽進行同步。 支持TypeScript和Type hinting。 包括更新組件localStorage的功能和觸發(fā)組件外部的狀態(tài)更新。
這也是一個非常受歡迎的鉤子庫，每周約有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的一個狀態(tài)鉤子，用于指定一個React元素是否有懸停。該鉤子返回一個參考值和一個布爾值，指定該參考值的元素是否在此刻懸停。它只需將返回的引用添加到任何你想跟蹤的懸停狀態(tài)的元素中。
它提供的功能列舉如下:
它毫不費力地使用和理解。 該庫很小，易于使用。 它支持TypeScript。 為懸停效果提供了一個延遲。
它的周下載量只有2,339左右，GitHub星級為0.5k，但如果你創(chuàng)造性地使用它，它有很大的潛力。
你可以用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媒體查詢的狀態(tài)。
你是否曾經(jīng)需要一種方法來跟蹤CSS中的媒體查詢？use-media鉤子直接解決了這個問題，因為媒體查詢對于任何應用程序或網(wǎng)站的響應性都是極其關鍵的。
這個鉤子包括以下功能:
支持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、管理狀態(tài)、運行異步代碼的鉤子。ode，并為我們帶來很多React沒有提供的功能。同樣重要的是，它是一個非常詳細和完善的文檔的庫。
到目前為止，react-recipes的總下載量超過了46.58k，GitHub上有470顆星。
你可以用npm i react-recipes --save命令安裝React-recipes，下面的例子展示了如何實現(xiàn)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是一個輕量級的鉤子，用來對對象進行調試。
你可以使用這個鉤子來去掉任何快速變化的值。它經(jīng)常被用于獲取數(shù)據(jù)的輸入和表單中，它被用來延遲函數(shù)的執(zhí)行。
它可能是最常用的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作為默認方法。
現(xiàn)有的connect API仍在工作，并將在未來得到支持，但hooks API更直接、更簡單，并且在TypeScript中表現(xiàn)良好。
以下是最重要的Redux Hooks。
useSelector -使用選擇器函數(shù)讓你從Redux商店狀態(tài)中提取數(shù)據(jù)。
useDispatch -這個鉤子從Redux商店返回一個對調度函數(shù)的引用。你可以根據(jù)需要使用它來調度行動。
useStore -這個鉤子返回一個對同一個Redux商店的引用，不經(jīng)常使用。
它在GitHub上有超過20.9k顆星，這表明它在React社區(qū)是多么受歡迎。
文檔是有益的--有時有點復雜，但它會給你所有的細節(jié)，你需要開始使用它們。
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節(jié)點中。
下拉、模態(tài)、通知彈出、工具提示都可以用usePortal簡單創(chuàng)建。它還允許在應用程序的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>
)}
</>
)
}