十大React Hook庫
- 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065
- 原文作者：Juraj Pavlović
- 譯者：培歌行（陽光是sunny）
React Hook來了，並在暴風雨中佔領了React社群。自最初發布以來已經有一段時間了，這意味著有很多支援庫。在搜尋與React相關的內容時，很難不看到“ hook”這個詞語。如果你還沒有遇到的話，應該儘快將它們加入程式碼庫學習起來。它們將使您的編碼生活變得更加輕鬆和愉快。
在React開發中，保持乾淨的程式碼風格，可讀性，可維護性，更少的程式碼行以及可重用性至關重要。該部落格將向您展示應當被立即開始使用的十大React Hook庫。不用再拖延了，讓我們開始吧。
1.use-http
use-http是一個非常有用的庫，可用來替代Fetch API。它使您的編碼更簡單易懂，更精確地講是資料操作部分。use-http本身使用TypeScript，甚至支援SSR和GraphQL。它返回響應，載入，錯誤資料和不同的請求方法，例如Get，Post，Put，Patch和Delete。
它提供的主要功能是：
- 請求/響應攔截器
- 暫停（目前處於實驗狀態）
- 重發功能
- 快取
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 (
<>
<button onClick={addTodo}>Add Todo</button>
{error && 'Error!'}
{loading && 'Loading...'}
{todos.map(todo => (
<span key={todo.id}>{todo.title}</span>
)}
</>
);
};
2. useMedia
您是否需要一種跟蹤CSS媒體查詢的方法？useMedia提供一個簡單的方法解決這個問題。這是一個能夠準確跟蹤的感官鉤子。在任何應用程式或網站上，媒體查詢以及響應能力都非常重要。
它以TypeScript編寫。該軟體包具有定義明確的文件，它的用法以及測試方法也解釋的非常好。
用法示例：
import useMedia from 'use-media';
const Example = () => {
const isWide = useMedia({minWidth: '1000px'});
return (
<span>
Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"}
</span>
);
};
3.Constate
Constate可將本地狀態提升到React Context。這意味著可以以最小的努力輕鬆地將任何元件的任何狀態提升到上下文。如果您想在多個位置使用相同的狀態，或者為多個元件提供相同的狀態，這很有用。該名稱來自合併Context和state。
它是基於typescript實現的，而且庫非常的小。雖然該文件不是很詳細，但是看例子，我們就可以輕易地學會使用。
用法示例：
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 <button onClick={increment}>+</button>;
}
function Count() {
// use the context
const { count } = useCounterContext();
return <span>{count}</span>;
}
function App() {
// wrap the component with provider
return (
<CounterProvider>
<Count />
<Button />
</CounterProvider>
);
4. Redux hooks
Redux是許多（即使不是全部）React開發人員的知名工具。在整個應用程式中，它用作全域性狀態管理器。在React的最初版本釋出幾個月後，它就隨hooks而出現了。它通過利用現有的connect（）方法 提供了 一種 替代HOC（高階元件）模式的方法。
提供的最著名的掛鉤是：
- useSelector
- useDispatch
- useStore
該文件非常好，雖然有點複雜，但是它將為您提供開始使用它們所需的任何資訊。
用法示例：
import {useSelector, useDispatch} from "react-redux";
import * as actions from "./actions";
const Example = () => {
const dispatch = useDispatch()
const counter = useSelector(state => state.counter)
return (
<div>
<span>
{counter.value}
</span>
<button onClick={() => dispatch(actions.incrementCounter)}>
Counter +1
</button>
</div>
);
};
5. React hook form
React hook form是一個表單鉤子庫，類似於Formik和Redux表單，但是更好！憑藉其更簡單的語法，速度，更少的重新渲染數和更好的可維護性，它開始爬上GitHub的階梯。
它的體積很小，並且是考慮到效能而構建起來的。該庫甚至提供了非常棒的表單生成器！它是React鉤子庫中GitHub star數量最多的庫之一（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 (
<form onSubmit={handleSubmit(onSubmit)}>
<input name="firstName" ref={register} />
<input name="lastName" ref={register({ required: true })} />
{errors.lastName && <span>"Last name is a required field."</span>}
<input name="age" ref={register({ required: true })} />
{errors.age && <span>"Please enter number for age."</span>}
<input type="submit" />
</form>
);
}
6. useDebounce
useDebounce表示一個用於防抖的小鉤子。它用於將功能的執行推遲到以後。常用於獲取資料的輸入框和表格中。
用法示例：
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 (
<div>
<input
defaultValue={"Hello"}
onChange={(e) => {
setText(e.target.value);
}}
/>
<p>Value: {text}</p>
<p>Debounced value: {value}</p>
</div>
);
}
7. useLocalStorage
useLocalStorage是一個小鉤子，與上面的鉤子一樣。它對於在localStorage中提取和設定資料非常有用。使用它之後操作變得很容易。
提供自動JSON序列化和同步的功能
文件以高質量的方式編寫，並且通過擴充套件示例可以完全理解。
用法示例：
import React, { useState } from "react";
import { writeStorage } from '@rehooks/local-storage';
export default function Example() {
let counter = 0;
const [counterValue] = useLocalStorage('counterValue');
return (
<div>
<span>{counterValue}</span>
<button onClick={() => writeStorage('i', ++counter)}>
Click Me
</button>
</div>
);
}
8. usePortal
usePortal使得建立下拉選單，彈出層，通知彈出視窗，提示等變得非常容易！它提供了在應用程式的DOM層次結構之外建立元素的功能。
它還提供了門戶樣式和大量其他選項的完全定製。
編寫的文件非常好，其中展示了許多示例，這些示例足夠用於開始使用庫/自己做鉤子。
用法示例：
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 me!</button>, hit ESC or
click outside of me.
</p>
</Portal>
)}
</>
)
}
9. useHover
它確定是否正在處於hover的React元素。簡單易用。該庫很小，易於使用，但如果您有足夠的創造力，它可能會很強大。
它還提供了懸停效果的延遲功能。支援TypeScript。雖然文件沒有那麼詳細，但是它將向您展示如何正確地使用它。
用法示例：
import useHover from "react-use-hover";
const Example = () => {
const [isHovering, hoverProps] = useHover();
return (
<>
<span {...hoverProps} aria-describedby="overlay">Hover me</span>
{isHovering ? <div> I’m a little tooltip! </div> : null}
</>
);
}
10. React router hooks
React router 是React最受歡迎的庫之一。它用於路由和獲取應用程式URL歷史記錄等。它與Redux一起實現了用於獲取此類有用的資料
提供的掛鉤有：
- useHistory
- useLocation
- useParams
- useRouteMatch
它的名字很不言自明。UseHistory將獲取應用程式歷史記錄和方法的資料，例如push一個new route。UseLocation將返回代表當前URL的物件。UseParams將返回當前URL的引數的鍵-值對的物件。最後，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 (
<div>
<span>Current URL: {location.pathname}</span>
{isMatchingURL ? <span>Matching provided URL! Yay! </span> : null}
<button type="button" onClick={handleClick}>
Go home
</button>
</div>
);
}
還有更多的鉤子庫，但是這些是我決定要談論的。請嘗試一下，我保證您不會後悔。如果您確實很喜歡它們，請以任何方式去支援他們。hooks仍然是執行此操作的一種相對較新的方法。在接下來的幾個月中，我們希望有更多出色的庫和鉤子示例浮出水面。
希望您發現這篇文章有趣，並且您學到了一些新東西。在進一步探索hooks中玩得開心！發展愉快。
公眾號：《前端陽光》 後臺回覆加群，歡迎和大佬們交流技術