【譯】值得推薦的十大React Hook 庫
阿新 • • 發佈：2020-10-27
# 十大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自述檔案都對此進行了很好的記錄。
用法示例：
```js
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 (
<>
{error && 'Error!'}
{loading && 'Loading...'}
{todos.map(todo => (
{todo.title}
)}
);
};
```
## 2. useMedia
您是否需要一種跟蹤CSS媒體查詢的方法？useMedia提供一個簡單的方法解決這個問題。這是一個能夠準確跟蹤的感官鉤子。在任何應用程式或網站上，媒體查詢以及響應能力都非常重要。
它以TypeScript編寫。該軟體包具有定義明確的文件，它的用法以及測試方法也解釋的非常好。
用法示例：
```js
import useMedia from 'use-media';
const Example = () => {
const isWide = useMedia({minWidth: '1000px'});
return (
Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"}
);
};
```
## 3.Constate
Constate可將本地狀態提升到React Context。這意味著可以以最小的努力輕鬆地將任何元件的任何狀態提升到上下文。如果您想在多個位置使用相同的狀態，或者為多個元件提供相同的狀態，這很有用。該名稱來自合併**Con**text和**state**。
它是基於typescript實現的，而且庫非常的小。雖然該文件不是很詳細，但是看例子，我們就可以輕易地學會使用。
用法示例：
```js
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