ReactHook来了，席卷了React社区。自最初发布以来已经有一段时间了，这意味着有很多支持库。在搜索与React相关的内容时，很难不看到“hook”一词。如果您还没有遇到过它们，您应该尽快将它们添加到代码库中以进行学习。它们将使您的编码生活更轻松、更愉快。在React开发中，保持干净的代码风格、可读性、可维护性、更少的代码行数和可重用性是至关重要的。本博客将向您展示您应该立即开始使用的前10个ReactHook库。事不宜迟，让我们开始吧。1.use-httpuse-http是一个非常有用的库，可以用来替代FetchAPI。它使您的编码更容易理解，更准确地说是数据操作部分。use-http本身使用TypeScript，甚至支持SSR和GraphQL。它返回响应、加载、错误数据和不同的请求方法，如Get、Post、Put、Patch和Delete。它提供的主要功能有：请求/响应拦截器暂停（目前处于实验阶段）重新发送功能缓存这在CodeSandbox示例和Youtube视频以及GitHub自述文件中有详细记录。使用示例：importuseFetchfrom"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{error&&'Error!'}{loading&&'Loading...'}{todos.map(todo=>({todo.title})});};2.useMedia你需要一种方法来跟踪CSS媒体查询吗？useMedia提供了一个解决这个问题的简单方法。它是一个可以准确跟踪的感官钩子。在任何应用程序或网站中，媒体查询和响应性都非常重要。它是用TypeScript编写的。包中有定义明确的文档，其用法和测试方法也解释得很好。用法示例：importuseMediafrom'use-media';constExample=()=>{constisWide=useMedia({minWidth:'1000px'});return(Screeniswide:{isW想法？"宽屏":"窄屏"});};3.ConstateConstate可以将本地状态提升为ReactContext。这意味着任何组件的任何状态都可以轻松地提升到上下文中，而工作量很小。如果您想在多个地方使用相同的状态，或者为多个组件提供相同的状态，这将很有用。这个名字来自上下文和状态的结合。它是基于typescript实现的，库很小。虽然文档不是很详细，但是我们可以通过看例子轻松学会使用。使用示例：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最初发布几个月后，它带有hooks。它通过利用现有的connect()方法提供了HOC（高阶组件）模式的替代方案。提供的最著名的钩子是：useSelectoruseDispatchuseStore文档非常好，有点复杂，但它会为您提供开始使用它们所需的任何信息。使用示例：import{useSelector,useDispatch}from"react-redux";import*asactionsfrom"./actions";constExample=()=>{constdispatch=useDispatch()constcounter=useSelector(state=>state.counter)return({counter.value}dispatch(actions.incrementCounter)}>Counter+1
);};5.ReacthookformReacthookform是一个表单钩子库，类似于Formik和Redux表单，但更好！凭借其更简单的语法、速度、更少的重新渲染和更好的可维护性，它开始攀登GitHub阶梯。它体积小，并且在构建时考虑到了性能。该库甚至提供了一个很棒的表单生成器！它是Reacthooks库中GitHub星数最高的库之一(14.8k)。使用示例：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代表防抖的小勾。它用于将函数的执行推迟到以后。常用于输入框和表单中获取数据。用法示例：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);}}/>值：{text}
Debouncedvalue:{value}
);}7.useLocalStorageuseLocalStorage是一个小hook，和上面的hook一样。它对于在localStorage中获取和设置数据很有用。使用后操作变得简单。提供自动JSON序列化和同步的功能文档以高质量的方式编写，并通过扩展示例完全易于理解。用法示例：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层次结构之外创建元素的能力。它还提供完全自定义的门户样式和大量其他选项。该文档写得很好，显示了许多示例，这些示例足以让您开始使用该库/制作您自己的钩子。用法示例：importReact,{useState}from"react";importusePortalfrom"react-useportal";constExample=()=>{const{ref,openPortal,closePortal,isOpen,Portal}=usePortal()return(<>openPortal()}>OpenPortal{isOpen&&(ThisPortalhandlesitsownstate.{''}Closeme!,hitESCorclickoutsideofme.
)})}9.useHover判断一个React元素是否悬停。简单易用。该库很小且易于使用，但如果您有足够的创造力，它会非常强大。它还为悬停效果提供延迟功能。支持打字稿。虽然文档不是那么详细，但它会告诉你如何正确使用它。使用示例：从"react-use-hover"导入useHover;constExample=()=>{const[isHovering,hoverProps]=useHover();return(<>Hoverme{isHovering?I'malittletooltip!
:null});}10.ReactrouterhooksReactrouter是React最流行的库之一。它用于路由和获取应用程序URL历史记录等。它是用Redux实现的，用于获取这些有用的数据。提供的钩子是：useHistoryuseLocationuseParamsuseRouteMatch它的名字是不言自明的。UseHistory会获取应用历史和方法的数据，比如推送新路由。UseLocation将返回一个表示当前URL的对象。UseParams将返回当前URL的键值对参数对象。最后，useRouteMatch将尝试将当前URL与给定的URL进行匹配，该URL可以是字符串或具有不同选项的对象。文档很好，写了很多例子。使用示例：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
);}还有很多钩子库，但我决定讨论这些。请尝试一下，我保证你不会后悔的。如果您真的喜欢他们，请尽您所能支持他们。钩子仍然是一种相对较新的方法。在接下来的几个月里，我们希望看到更多关于库和挂钩的优秀示例。希望您发现这篇文章很有趣并且您学到了一些新东西。享受进一步探索钩子的乐趣吧！快乐发展。
