推荐十一个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