Hooks的出现席卷了React社区。自最初发布以来已经有一段时间了，这意味着有很多支持库。在搜索与React相关的内容时，很难不说“hook”。如果您还没有使用它，您应该尽快将它们添加到代码库中。它们将使您的编码生活更轻松、更愉快。在React开发中，保持干净的代码风格、可读性、可维护性、更少的代码行数和可重用性是至关重要的。本文将向您介绍十一个您应该立即开始使用的ReactHook库。事不宜迟，让我们开始吧。1.use-httpuse-http是一个非常有用的包，可以用来替代FetchAPI。以高质量编写和维护。它使您的编码更容易理解，更准确地说是数据处理部分。hook本身使用TypeScript，甚至支持SSR和GraphQL。它返回响应、加载、错误数据和不同的请求方法，如Get、Post、Put、Patch和Delete。它提供的主要功能是：请求/响应拦截器ReactNative支持在卸载组件时中止/取消挂起的http请求缓存这在CodeSandbox示例和Youtube视频以及GitHub自述文件中有详细记录。官网地址：https://use-http.com/#/UsecaseimportuseFetchfrom"use-http"constExample=()=>{const[todos,setTodos]=useState([])const{get,post,response,loading,error}=useFetch("https://example.com")useEffect(()=>{get("/todos")},[])constaddTodo=async()=>{awaitpost("/todos",{title:"exampletodo"});if(response.ok)setTodos([...todos,newTodo])}return(<>AddTodo{错误&&'错误！'}{loading&&'Loading...'}{todos.map(todo=>({todo.title})});};2.useMedia你需要一种跟踪CSS媒体查询的方法吗？useMedia钩子提供了一种简单的方法来解决这个问题。这是一个精确跟踪的React传感器钩子。任何应用程序或网站的媒体查询和响应能力都非常重要。它提供了支持写在TypeScript.Thepackage有定义明确的文档，解释了钩子的用法以及如何测试它们。地址：https://github.com/streamich/use-media用例：importuseMediafrom'use-media';constExample=()=>{constisWide=useMedia({minWidth:'1000px'});return(Screeniswide:{isWide?"WideScreen":"NarrowScreen"});};3.ConstateConstate是一个hook包，将本地状态提升到ReactContext。这意味着任何组件的任何状态都可以轻松地提升到上下文中，而工作量很小。如果您想在多个地方使用相同的状态，或者为多个组件提供相同的状态，这将很有用。这个名字来自于结合上下文和状态的文字游戏。用Typescript写的，体积很小。虽然文档不是很详细，但它完成了工作。地址：https://github.com/diegohaz/constate用例：importReact,{useState}from"react";importconstatefrom"constate";//customhookfunctionuseCounter(){const[count,setCount]=useState(0);constincrement=()=>setCount(prevCount=>prevCount+1);return{count,increment};}//hookpassedinconstateconst[CounterProvider,useCounterContext]=constate(useCounter);functionButton(){//usethecontextconst{increment}=useCounterContext();return+;}functionCount(){//usethecontextconst{count}=useCounterContext();return{count};}functionApp(){//wrapthecomponentwithproviderreturn();4.ReduxhooksRedux是许多（如果不是全部）React开发人员的知名工具。在整个应用程序中，它用作全局状态管理器。React在最初发布几个月后就出现了。它通过现有的connect()方法提供了HOC（高阶组件）模式的替代方案。提供的最著名的钩子是：useSelectoruseDispatchuseStore文档非常好，有点复杂，但它会为您提供开始使用它们所需的任何信息。地址：https://github.com/reduxjs/redux用例：import{useSelector,useDispatch}from"react-redux";importReactfrom"react";import*asactionsfrom"./actions";constExample=()=>{constdispatch=useDispatch()constcounter=useSelector(state=>state.counter)return({counter.value}dispatch(actions.incrementCounter)}>计数器+1
);};5.ReacthookformReacthookform是一个类似于Formik和Reduxforms的表单验证钩子库，但更好！凭借其更简单的语法、速度、更少的转换和更好的可维护性，它开始攀登GitHub的阶梯。它体积小，并且在构建时考虑到了性能。该图书馆甚至提供其表单生成器，这太棒了！它是Reacthooks库中GitHub发布次数最多的库之一(14.8k)。它提供的主要功能：不受控的表单验证根据性能和开发经验构建一个迷你卷，没有其他依赖遵循html标准进行验证兼容ReactNative支持浏览器原生验证地址：https://github.com/react-hook-form/react-hook-form用例：importReactfrom"react";import{useForm}from"react-hook-form";functionApp(){const{register,handleSubmit,errors}=useForm();constonSubmit=(data)=>{//logs{firstName:"exampleFirstName",lastName:"exampleLastName"}console.log(data);};return({errors.lastName&&"Lastnameisrequiredfield."}{errors.age&&"Pleaseenternumberforage."});}6.useDebounceuseDebounce表示去抖动的小钩子。它用于将函数执行推迟到以后。常用于输入和表单中以获取数据。地址：https://github.com/xnimorz/use-debounce用例：importReact,{useState}from"react";import{useDebounce}from"use-debounce";exportdefaultfunctionInput(){const[text,setText]=useState("Hello");const[value]=useDebounce(text,1000);return({setText(e.target.value);}}/>Value:{text}
Debouncedvalue:{value}
);}7.useLocalStorageuseLocalStorage是一个小hook，和上面的hook一样.这对于在localStorage中获取和设置数据很有用。操作变得容易。提供跨多个选项卡的自动JSON序列化和同步，并且是用TypeScript编写的，因此它提供了类型。文档以高质量的方式编写，并通过扩展示例很好地理解。地址：https://github.com/rehooks/local-storage用例：importReact,{useState}from"react";import{writeStorage}from'@rehooks/local-storage';exportdefaultfunctionExample(){letcounter=0;const[counterValue]=useLocalStorage('counterValue');return({counterValue}writeStorage('i',++counter)}>ClickMe
);}8.usePortalusePortal使创建下拉菜单、模式、通知弹出窗口、工具提示等变得超级容易！它提供了有关在应用程序的DOM层次结构之外创建元素的信息（反应文档）。这个钩子适用于SSR，因为它是同构的。用TypeScript编写并具有内置状态。它还提供完全自定义的门户样式和大量其他选项。为此编写的文档非常好，展示了许多示例，这些示例足以让您开始使用该库/制作您自己的钩子。地址：https://github.com/alex-cory/react-useportal用例：importReact,{useState}from"react";从“react-useportal”导入usePortal；constExample=()=>{const{ref,openPortal,closePortal,isOpen,Portal}=usePortal()return(<>openPortal()}>OpenPortal{isOpen&&(ThisPortalhandlesitsownstate.{''}Closeme!,hitESCorclickoutsideofme.
)})}9.useHoveruseHover是一个React状态挂钩，用于确定React元素是否正在悬停。简单易用。该库很小且易于使用，但如果您有足够的创造力，它会非常强大。它还为悬停效果提供延迟。支持打字稿。文档没有那么详细，但它会告诉你如何正确使用它。地址：https://github.com/andrewbranch/react-use-hover用例：importuseHoverfrom"react-use-hover";constExample=()=>{const[isHovering,hoverProps]=useHover();return(<>Hoverme{isHovering?I'malittletooltip!
:null});}10.ReactrouterhooksReactrouterhooks是React最流行的库之一。它用于路由和获取应用程序URL历史记录等。它与Redux一起实现钩子来获取这些有用的数据。它提供的主要功能是：useHistoryuseLocationuseParamsuseRouteMatch它的名字是不言自明的。UseHistory将从应用程序历史记录和方法中获取数据，例如推送到新路由。UseLocation将返回一个表示当前URL的对象。UseParams将返回当前路径的URL参数的键值对对象。最后，useRouteMatch将尝试将当前URL与给定的URL进行匹配，该URL可以是字符串或具有不同选项的对象。文档很好，例子地址也很多：https://github.com/ReactTraining/react-router用例：import{useHistory,useLocation,useRouteMatch}from"react-router-dom";constExample=()=>{lethistory=useHistory();letlocation=useLoction();letisMatchingURL=useRouteMatch("/post/11");functionhandleClick(){history.push("/home");}return(CurrentURL:{location.pathname}{isMatchingURL?MatchingprovidedURL!Yay!:nullGohome
);}11.react-usereact-use是一个必不可少的ReactHooks集合。您需要安装React16.8.0或更高版本才能使用HooksAPI。地址：github.com/streamich/react-use用例：import{useBattery}from'react-use';constDemo=()=>{conststate=useBattery();return({JSON.stringify(state,空,2)});};目前hook库较多，最好找到适合自己的。不仅提高了开发效率，也让代码更加整洁简洁。
