【译】值得推荐的十大React Hook 库

译者：培歌行（阳光是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）。