推荐十一个React Hook库

Hooks来了，并在暴风雨中占领了React社区。自最初发布以来已经有一段时间了，这意味着有很多支持库。在搜索与React相关的内容时，很难不说“ hook”。如果你们还没有使用它的话，应该尽快将它们加入代码库。它们将使您的编码生活变得更加轻松和愉快。

创新互联建站专注于企业成都营销网站建设、网站重做改版、白塔网站定制设计、自适应品牌网站建设、H5建站、商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为白塔等各大城市提供网站开发制作服务。

在React开发中，保持干净的代码风格，可读性，可维护性，更少的代码行以及可重用性至关重要。本篇文章将向您介绍应立即开始使用的十一个React Hook库。不用再拖延了，让我们开始吧。

1.use-http
use-http是一个非常有用的软件包，可用来替代Fetch API。以高质量编写和维护。它使您的编码更简单易懂，更精确地讲是数据处理部分。hook本身使用TypeScript，甚至支持SSR和GraphQL。它返回响应，加载，错误数据和不同的请求方法，例如Get，Post，Put，Patch和Delete。

它提供的主要功能是：

请求/响应拦截器
支持React Native
卸载组件时中止/取消挂起的http请求
缓存

CodeSandbox示例和Youtube视频以及GitHub自述文件都对此进行了很好的记录。

官网地址: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。媒体查询以及任何应用程序或网站的响应能力都非常重要。

它提供了支持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，可将本地状态提升到React Context。这意味着可以以最小的努力轻松地将任何组件的任何状态提升到上下文。如果您想在多个位置使用相同的状态，或者为多个组件提供相同的状态，这很有用。该名称来自合并上下文和状态的文字游戏。使用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开发人员的知名工具。在整个应用程序中，它用作全局状态管理器。在React的最初版本发布几个月后，它就随钩而上了。它通过现有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库，但是更好！凭借其更简单的语法，速度，更少的转译和更好的可维护性，它开始爬上GitHub的阶梯。它的体积很小，并且考虑到性能而构建。该库甚至提供了它的表单生成器，这很棒！它是React钩子库（14.8k）中GitHub启动数量最多的平台之一。

它提供的主要功能:

非受控表单校验
以性能和开发体验为基础构建
迷你的体积而没有其他依赖
遵循 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 (   
  
  
         
  
  
           
  
  
           
  
  
        {errors.lastName && "Last name is a required field."}   
  
  
           
  
  
        {errors.age && "Please enter number for age."}   
  
  
           
  
  
         
  
  
    );   
  
  
  }

6.useDebounce
useDebounce 表示一个用于去抖的小钩子。它用于将功能执行推迟到以后。常用于获取数据的输入和表格中。

地址: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 (   
  
  
         
  
  
          
  
  
  
        defaultValue={"Hello"}   
  
  
          onChange={(e) => {   
  
  
            setText(e.target.value);   
  
  
          }}   
  
  
        />   
  
  
        Value: {text}
   
  
  
        Debounced value: {value}

7.useLocalStorage
useLocalStorage是一个小钩子，与上面的钩子一样。这对于在localStorage中提取和设置数据非常有用。操作变得容易。提供跨多个选项卡的自动JSON序列化和同步，并以TypeScript编写，因此它提供了类型。

文档以高质量的方式编写，并且可以通过扩展示例来很好地理解。

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

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.
)}
)
}

import useHover from "react-use-hover";
const Example = () => {
const [isHovering, hoverProps] = useHover();
return (
<>
Hover me
{isHovering ?
I’m a little tooltip!
: null}
);
}

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
);
}

import {useBattery} from 'react-use';
const Demo = () => {
const state = useBattery();
return (
```
 
```
{JSON.stringify(state, null, 2)}