一些值得关注的ReactHook库

本文转载自微信公众号“TianTianUp”，作者小义。转载本文请联系天天向上公众号。大家好，我是天天。今天分享的是值得关注的十大ReactHook库。字面上的ReactHooks是一种函数类型，允许您挂钩React状态和生命周期函数。此功能在React16.8更新中首次引入，从那时起它已成为任何React应用程序的重要组成部分。因此，作为Web开发人员，我们应该知道实现ReactHooks的最佳方式，本文将讨论可以在您的下一个React项目中轻松使用的前10个ReactHook库。使用Reacthooks时要记住的一件事是它们是可组合的。这意味着您应该将它们视为可重用的有状态逻辑构建块，可用于编写更大、更复杂的新钩子——就像您处理UI组件一样。ReactHookFormReact-Hook-Form是一个基于性能的灵活库，具有用户友好和可扩展的形式。可以说，这是最常用的Hooks库之一，它具有一些惊人的功能，例如：最小化重新渲染的次数并加快安装速度。一个没有任何依赖的小型库。它可以很容易地被采用而无需其他依赖。注重用户体验。可维护性。内置表单验证支持。最重要的是，ReactHook表单库每周有大约780,000次下载，并拥有超过205,000个GitHub星数。这些统计数据还表明库的使用情况和受欢迎程度，如果您想使用该库，可以使用npm和npmireact-hook-form命令轻松下载它。以下代码显示了使用自定义ReactFormHookuseForm的示例，您可以使用其文档了解更多详细信息：importReactfrom"react";importuseFormfrom"react-hook-form";constfontstyle={fontSize:"15px"};exportdefaultfunctionOrder(){const{signup,handleSubmit,errors}=useForm();constonSubmit=data=>{//uploadthedataretreivedfromtheformtoadatabase,returnvaluetoauser,etcconsole.log(data);};return(

);}HookRouterReactHookRouter是一个很好的库，可以满足你的应用程序的路由需求随着你的项目的增长，对一个正式和方便的路由系统的需求变得越来越重要。然而，你不必担心，因为React提供了完美的解决方案。虽然处于早期阶段，但它具有一些吸引开发人员的现有功能。我可以很容易地列出其中的一些功能。使用navigate(url,[replace],[queryParams])函数可以轻松实现程序化导航。重定向是在useRedirect()钩子的支持下处理的。使用辅助函数setLinkProps()创建自定义链接组件。拦截导航意图和受控拦截器。使用setBasepath()设置基本路径以忽略URL开头的某些路径。HookRouter是react-router的现代替代品，每周有4647次下载和大约1.3kGitHub星数。您可以通过运行npmihookrouter轻松安装HookRouter，下面的示例展示了HookRouter的简单用法。//index.jsorwhereyouchoosetorenderyourentireappfromimport{useRoutes}from"hookrouter";importRoutesfrom"./router";functionApp(){constroutes=useRoutes(Routes);return;}注：如果我们平时使用react-router，代码行数可能会增加，因为我们必须渲染组件并为应用程序中的每个路由传递道具。现在只需导入Routes部分并将其传递给useRoutesHook。Use-HttpUse-Http是一个很棒的包，可以替代FetchAPI。它是一个基于TypeScript的库，使我们能够轻松地编写代码，同时提高可读性，重点关注数据使用的角度。它提供的主要功能可以列举如下：支持服务器端渲染（SSR）和React-Native支持GraphQLwithuseQuery和useMutationHooks。请求/响应拦截器。暂停支持。重试功能。内置缓存和持久缓存支持。它的当前版本是1.0.20，每周有14,418次下载和1.8kGitHub星数。您可以通过运行npmiuse-http命令使用npm安装它，下面的代码显示了一个使用useFetch挂钩的简单示例。从“use-http”导入useFetch")useEffect(()=>{get("/orders")},[])constaddOrder=async()=>{awaitpost("/orders",{title:"exampleorder"});if(response.ok)setOrders([...orders,newOrder])}return(<>AddOrder{error&&'错误！'}{loading&&'正在加载...'}{orders.map(order=>({order.title})});};UseLocalStorageUseLocalStorage挂钩允许我们将状态同步到本地存储，以便跨页面保存刷新。使用useLocalStorage挂钩，我们可以顺利处理本地存储，它有一些有趣的功能，例如：支持自动JSON序列化。通过多个标签同步。支持TypeScript和类型提示。包括更新组件localStorage和triggercomponentsoutside对此进行状态更新，这也是一个非常流行的hooks库每周约14307次下载，GitHub星数超过21.9k。文档写得很好，易于理解，有大量的例子。使用npm，安装一如既往的简单。你只需要运行npmi@rehooks/local-storage--save命令，然后你可以尝试下面的例子。importReactfrom"react";import{useLocalStorage}from'@rehooks/local-storage';exportdefaultfunctionApp(){const[value,setValue,remove]=useLocalStorage("key","product");return(

Value:{value}

setValue("Shampoo")}>洗发水setValue("Conditioner")}>护发素remove()}>Remove

);}React-Use-HoveruseHover是React的一个状态钩子，用于指定一个React元素是否有悬停。此挂钩返回一个引用和一个布尔值，指定引用的元素此时是否悬停。它只是将返回的引用添加到您希望在悬停时跟踪的任何元素。它提供的功能如下所列：使用和理解起来毫不费力。图书馆很小，很容易使用。它支持打字稿。为悬停效果提供延迟。它只有大约2,339周的下载量和0.5kGitHub星，但如果你创造性地使用它，它有很大的潜力。您可以使用npminstallreact-use-hover安装它并自己尝试。importuseHoverfrom"react-use-hover";constExample=()=>{const[isHovering,hoverProps]=useHover();return(<>Hoverpls{isHovering?

Hey..Iamhovered!

:null});}UseMediauseMedia是React的传感器钩子，用于跟踪CSS媒体查询的状态。您是否需要一种方法来跟踪CSS中的媒体查询？use-media钩子直接解决了这个问题，因为媒体查询对于任何应用程序或网站的响应能力都极为关键。此挂钩包括以下功能：支持TypeScript。该库附带了很好的文档，描述了如何使用挂钩以及如何测试它。useMediahooks每周下载量超过96,000次，GitHub星数415颗，目前版本为1.4.0。您可以通过运行npminstall--saveuse-mediacommand使用npm安装它，下面的代码显示了一个使用useMediahook的简单示例。importuseMediafrom'use-media';constExample=()=>{constisWidth=useMedia({minWidth:'500px'});return(Pagewidthis:{isWidth?"WideScreen":"NarrowScreen"});};ReactRecipesReact-recipes是一个hook库，拥有大量的自定义Hooks。它包括用于使用浏览器API、管理状态和运行异步代码的挂钩。ode，并为我们带来了很多React没有提供的特性。同样重要的是，它是一个非常详细且文档齐全的库。到目前为止，react-recipes在GitHub上的总下载量超过46.58k和470颗星。你可以使用npmireact-recipes--save命令安装React-recipes，下面的例子展示了如何实现useSpeechSynthesis让你的浏览器说话。importReact，{useState}来自“react”；从“react-recipes”导入{useSpeechSynthesis}；exportdefaultfunctionApp（）{const[value，setValue]=useState（“”）；const[ended，setEnded]=useState（false）；constonBoundary=(event)=>{console.log(`${event.name}:${event.elapsedTime}milliseconds.`);};constonEnd=()=>setEnded(true);constonError=(event)=>{console.warn(event);};const{cancel,speak,speaking,supported,voices,pause,resume}=useSpeechSynthesis({onEnd,onBoundary,onError});if(!supported){return"VoiceNotSupported.";}return(

setValue(event.target.value)}/>/*makesthebrowserstartspeaking*/speak({text:value,voice:voices[1]})}>SpeakButton/*取消语音合成*/CancelButton/*letsuspausespeaking*/<按钮类型=“按钮”点击={暂停}>暂停按钮/*letsusresumespeaking*/ResumeButton

{speaking&&"Voiceisspeaking"}

{ended&&"Voicehasended”

语音：

{voices.map((voice)=>({voice.name}

))}

);}UseDebounceUseDebounce是一个用于调试对象的轻量级钩子。您可以使用此挂钩删除任何快速变化的值。它常用于输入和表单中获取数据，用于延迟函数的执行。它可能是最常用的Reacthook库之一，每周下载量为398,202次，GitHub星数约为1.4k。你可以使用npmiuse-debounce-save命令安装这个钩子。importReact,{useState}来自“react”；导入{useDebounce}来自“use-debounce”；exportdefaultfunctionInput(){const[text,setText]=useState(“Hi”);const[value]=useDebounce(text,1000);return(

{setText(e.target.value);}}/>

值：{text}

Debouncedtext:{value}

);ReduxHooksReactRedux包含自己的自定义钩子API，它允许您的React组件订阅Redux存储和调度操作。在你的React组件中，建议使用React-ReduxhookAPI作为默认方法。现有的connectAPI仍然有效，将来会得到支持，但hooksAPI更直接、更简单，并且在TypeScript中表现良好。以下是最重要的ReduxHooks。useSelector-允许您使用选择器函数从Redux存储状态中提取数据。useDispatch-此挂钩返回对Redux存储中的调度函数的引用。您可以根据需要使用它来分派操作。useStore-这个钩子返回对同一个Redux存储的引用，不经常使用。它在GitHub上有超过20.9k颗星，可见它在React社区中的流行程度。文档很有帮助-有时有点复杂，但它会为您提供开始使用它们所需的所有详细信息。import{useSelector,useDispatch}from"react-redux";importReactfrom"react";import*asactionsfrom"./actions";constReduxExample=()=>{constdispatch=useDispatch()constcounter=useSelector(state=>state.counter)return(

{counter.value}dispatch(actions.incrementCounter)}>Counter+1Increment

);}UsePortalReact入口提供将子项渲染到存在于父组件的DOM层次结构之外的DOM节点的一流方法。下拉菜单、模式、通知弹出窗口和工具提示都可以使用usePortal轻松创建。它还允许元素存在于应用程序的DOM层次结构之外。usePortal版本号为1.0.14，每周下载量约17754次，GitHub星数超过700颗。您可以通过运行npmi-Sreact-useportal命令使用npm安装它，下面的代码显示了一个使用usePortalhook的简单示例。importReact,{useState}from"react";importusePortalfrom"react-useportal";constExample=()=>{const{ref,openPortal,closePortal,isOpen,Portal}=usePortal()return(<>openPortal()}>OpenPortal{isOpen&&(

ThisPortalhandlesitsownstate.{''}CloseThePortal!,PressESCorclickoutsideofme.

)})}