文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一些值得关注的React Hook库

2024-12-03 05:06

关注

本文转载自微信公众号「TianTianUp」,作者小弋。转载本文请联系TianTianUp公众号。

大家好,我是TianTian。

今天分享的是值得关注的十大React Hook库。

正文

React Hooks是一种函数类型,允许你钩住React状态和生命周期功能。这个功能在React 16.8更新中首次引入,从那时起,它已经成为任何React应用程序的一个重要组成部分。

因此,作为网络开发者,我们应该知道实现React Hooks的最佳方法,本文将讨论十大React Hook库,可以很容易地用于你的下一个React项目。

在使用React钩子时要记住的一点是,它们是可组合的。这意味着你应该把它们看作是可重用的有状态逻辑构件,可以用来组成新的更大、更复杂的钩子--就像你对UI组件一样。

React Hook Form

React-Hook-Form是一个基于性能的灵活库,具有易于用户验证和可扩展的形式。

可以说,这是目前使用最多的Hooks库之一,它有一些惊人的功能,比如:

除了所有这些之外,React Hook表单库每周大约有780,000次下载,并且有超过205,000个GitHub star。

这些统计信息还表明该库的使用和流行程度,如果您想使用该库,则可以使用npm和npm i react-hook-form命令轻松下载该库。

以下代码显示了使用自定义React Form Hook useForm的示例,您可以使用其文档获取更多详细信息:

  1. import React from "react"
  2. import useForm from "react-hook-form"
  3.  
  4. const fontstyle = { 
  5.   fontSize: "15px" 
  6. }; 
  7. export default function Order() { 
  8.   const { signup, handleSubmit, errors } = useForm(); 
  9.   const onSubmit = data => {  // upload the data retreived from the form to a databasereturn value to a user, etc 
  10.     console.log(data); 
  11.   }; 
  12.  
  13.   return ( 
  14.     
     
  15.        
  16.          
  17.         name="fullname" ref={signup} /> 
  18.          
  19.         
  20.           name="productName" 
  21.           ref={signup({ required: true, maxLength: 20 })} 
  22.         /> 
  23.  
  24.         <select style={fontstyle} name="Title" ref={signup({ required: true })}> 
  25.           <option value="">Select...option
  26.           <option value="One bundle">One bundleoption
  27.           <option value="Two bundle">Two bundleoption
  28.         select
  29.         
  30.           "checkbox" placeholder="Age 18+" name="Age 18+" ref={signup} />  
  31.           Age Above 18 Years Only 
  32.          
  33.         {errors.productType && 

    Required Field

  34.         "submit" value="Make the Payment" /> 
  35.        
  36.     
 
  •   ); 
  • HookRouter

    React HookRouter是一个很棒的库,用于满足您的应用程序的路由要求。

    随着项目的发展,对正式和便捷的路由系统的需求变得越来越重要。但是,您不必担心,因为React为此提供了完美的解决方案。

    尽管处于早期阶段,但它有一些现有的功能来吸引开发者。我可以很容易地列出其中的一些功能

    Hook Router是react-router的现代替代品,每周有4647次下载,大约有1.3k颗GitHub星。

    您可以通过运行npm i hookrouter轻松安装HookRouter,以下示例显示了HookRouter的简单用法。

    1. // index.js or where you choose to render your entire app from 
    2. import { useRoutes } from "hookrouter"
    3. import Routes from "./router"
    4.  
    5. function App() { 
    6.   const routes = useRoutes(Routes); 
    7.   return 
      {routes}

    注意:如果我们通常使用react-router,代码行数可能会增加,因为我们必须为我们应用中的每个路由渲染组件并传递道具。现在只需导入Routes部分并将其传递给useRoutes Hook。

    Use-Http

    Use-Http是一个很棒的包,它作为Fetch API的替代品。

    它是一个基于TypeScript的库,它允许我们在提高可读性的同时轻松地进行编码,并强烈关注数据使用角度。

    它提供的主要功能可以列举如下:

    它目前的版本是1.0.20,每周有14,418次下载和1.8k个GitHub星级。

    你可以通过运行npm i use-http命令使用npm来安装它,下面的代码显示了一个使用useFetch钩子的简单例子。

    1. import useFetch from "use-http" 
    2.  
    3. const OrderExample = () => { 
    4.   const [orders, setOrders] = useState([]) 
    5.   const { get, post, response, loading, error } = useFetch("https://ordering.com"
    6.    
    7.   useEffect(() => { get("/orders") }, []) 
    8.  
    9.   const addOrder = async () => { 
    10.       await post("/orders", { title: "example order" }); 
    11.       if (response.ok) setOrders([...orders, newOrder]) 
    12.   } 
    13.  
    14.   return ( 
    15.     <> 
    16.       Add Order 
    17.       {error && 'Error!'
    18.       {loading && 'Loading...'
    19.       {orders.map(order => ( 
    20.         key={order.id}>{order.title} 
    21.       )} 
    22.      
    23.   ); 
    24. }; 

    UseLocalStorage

    UseLocalStorage钩子允许我们将状态同步到本地存储中,以便在页面刷新时保留这些状态。

    使用useLocalStorage钩子,我们可以顺利地处理本地存储,它有一些有趣的功能,比如:

    支持自动JSON序列化。

    通过多个标签进行同步。

    支持TypeScript和Type hinting。

    包括更新组件localStorage的功能和触发组件外部的状态更新。

    这也是一个非常受欢迎的钩子库,每周约有14307次下载,GitHub星级超过21.9k。

    文档写得很好,容易掌握,有大量的例子。

    使用npm,安装一如既往地简单。你只需要运行npm i @rehooks/local-storage - save命令,然后你就可以尝试下面的例子了。

    1. import React from "react"
    2. import { useLocalStorage } from '@rehooks/local-storage'
    3.  
    4. export default function App() { 
    5.   const [value, setValue, remove] = useLocalStorage("key""product"); 
    6.  
    7.   return ( 
    8.     
       
    9.       
      Value: {value}
       
    10.        setValue("Shampoo")}>Shampoo 
    11.        setValue("Conditioner")}>Conditioner 
    12.        remove()}>Remove 
    13.     
     
  •   ); 
  • React-Use-Hover

    useHover是React的一个状态钩子,用于指定一个React元素是否有悬停。该钩子返回一个参考值和一个布尔值,指定该参考值的元素是否在此刻悬停。它只需将返回的引用添加到任何你想跟踪的悬停状态的元素中。

    为悬停效果提供了一个延迟。

    它的周下载量只有2,339左右,GitHub星级为0.5k,但如果你创造性地使用它,它有很大的潜力。

    你可以用npm install react-use-hover命令来安装它,然后自己试试。

    1. import useHover from "react-use-hover"
    2.  
    3. const Example = () => { 
    4.   const [isHovering, hoverProps] = useHover(); 
    5.   return ( 
    6.     <> 
    7.       "overlay">Hover pls 
    8.       {isHovering ? 
       Hey.. I am hovered! 
       : null
    9.      
    10.   ); 

    UseMedia

    useMedia是React的传感器钩子,用于跟踪CSS媒体查询的状态。

    你是否曾经需要一种方法来跟踪CSS中的媒体查询?use-media钩子直接解决了这个问题,因为媒体查询对于任何应用程序或网站的响应性都是极其关键的。

    这个钩子包括以下功能:

    useMedia钩子每周有超过96,000次的下载,同时有415颗GitHub之星,目前是1.4.0版本。

    你可以通过运行npm install --save use-mediacommand来使用npm来安装它,下面的代码显示了一个使用useMediahook的简单例子。

    1. import useMedia from 'use-media'
    2.  
    3. const Example = () => { 
    4.   const isWidth = useMedia({minWidth: '500px'}); 
    5.  
    6.   return ( 
    7.      
    8.       Page width is: {isWidth ? "WideScreen" : "NarrowScreen"
    9.      
    10.   ); 
    11. }; 

    React Recipes

    React-recipes是一个拥有大量自定义Hooks的钩子库。

    它包括用于使用浏览器API、管理状态、运行异步代码的钩子。ode,并为我们带来很多React没有提供的功能。同样重要的是,它是一个非常详细和完善的文档的库。

    到目前为止,react-recipes的总下载量超过了46.58k,GitHub上有470颗星。

    你可以用npm i react-recipes --save命令安装React-recipes,下面的例子展示了如何实现useSpeechSynthesis,让你的浏览器说话。

    1. import React, { useState } from "react"
    2. import { useSpeechSynthesis } from "react-recipes"
    3.  
    4. export default function App() { 
    5.   const [value, setValue] = useState(""); 
    6.   const [ended, setEnded] = useState(false); 
    7.   const onBoundary = (event) => { 
    8.     console.log(`${event.name}: ${event.elapsedTime} milliseconds.`); 
    9.   }; 
    10.   const onEnd = () => setEnded(true); 
    11.   const onError = (event) => { 
    12.     console.warn(event); 
    13.   }; 
    14.  
    15.   const { 
    16.     cancel, 
    17.     speak, 
    18.     speaking, 
    19.     supported, 
    20.     voices, 
    21.     pause, 
    22.     resume 
    23.   } = useSpeechSynthesis({ 
    24.     onEnd, 
    25.     onBoundary, 
    26.     onError 
    27.   }); 
    28.  
    29.   if (!supported) { 
    30.     return "Voice Not Supported."
    31.   } 
    32.  
    33.   return ( 
    34.     
       
    35.        setValue(event.target.value)} /> 
    36.    
    37.       
    38.         type="button" 
    39.         onClick={() => speak({ text: value, voice: voices[1] })} 
    40.       > 
    41.         Speak Button 
    42.        
    43.  
    44.       "button" onClick={cancel}> 
    45.         Cancel Button 
    46.        
    47.  
    48.       "button" onClick={pause}> 
    49.         Pause Button 
    50.        
    51.  
    52.       "button" onClick={resume}> 
    53.         Resume Button 
    54.        
    55.       

      {speaking && "Voice is speaking"}

       
    56.       

      {ended && "Voice has ended"}

       
    57.       
       
    58.         

      Voices:

       
    59.         
       
    60.           {voices.map((voice) => ( 
    61.             key={voice.name}>{voice.name}

       
    62.           ))} 
    63.          
    64.        
    65.      
    66.   ); 

    UseDebounce

    useDebounce是一个轻量级的钩子,用来对对象进行调试。

    你可以使用这个钩子来去掉任何快速变化的值。它经常被用于获取数据的输入和表单中,它被用来延迟函数的执行。

    它可能是最常用的React钩子库之一,每周有398,202次下载,大约有1.4k颗GitHub星。

    你可以通过npm i use-debounce - save命令来安装这个钩子。

    1. import React, { useState } from "react"
    2. import { useDebounce } from "use-debounce"
    3.  
    4. export default function Input() { 
    5.   const [text, setText] = useState("Hi"); 
    6.   const [value] = useDebounce(text, 1000); 
    7.  
    8.   return ( 
    9.     
       
    10.       
    11.         defaultValue={"Hey There!"
    12.         onChange={(e) => { 
    13.           setText(e.target.value); 
    14.         }} 
    15.       /> 
    16.       

      Value: {text}

       
    17.       

      Debounced text: {value}

       
    18.      
    19.   ); 

    Redux Hooks

    React Redux包括它自己的自定义钩子API,它允许你的React组件订阅Redux商店和调度行动。

    在你的React组件中,建议使用React-Redux钩子API作为默认方法。

    现有的connect API仍在工作,并将在未来得到支持,但hooks API更直接、更简单,并且在TypeScript中表现良好。

    以下是最重要的Redux Hooks。

    它在GitHub上有超过20.9k颗星,这表明它在React社区是多么受欢迎。

    文档是有益的--有时有点复杂,但它会给你所有的细节,你需要开始使用它们。

    1. import {useSelector, useDispatch} from "react-redux"
    2. import React from "react"
    3. import * as actions from "./actions"
    4.  
    5. const ReduxExample = () => { 
    6. const dispatch = useDispatch() 
    7. const counter = useSelector(state => state.counter) 
    8.  
    9. return ( 
    10.  
    11.     
    12.      {counter.value} 
    13.     
    14.     dispatch(actions.incrementCounter)}> 
    15.      Counter +1 Increment 
    16.     
    17.  
    18. ); 

    UsePortal

    React Portals提供了一种一流的方式,将子代渲染到存在于父代组件的DOM层次结构之外的DOM节点中。

    下拉、模态、通知弹出、工具提示都可以用usePortal简单创建。它还允许在应用程序的DOM层次结构之外的元素存在。

    usePortal的版本号为1.0.14,每周下载量约为17754,GitHub星级超过700。

    你可以通过运行npm i -S react-useportal命令使用npm来安装它,下面的代码显示了一个使用usePortalhook的简单例子。

    1. import React, { useState } from "react"
    2. import usePortal from "react-useportal"
    3.  
    4. const Example = () => { 
    5. const { ref, openPortal, closePortal, isOpen, Portal } = usePortal() 
    6.  
    7.     return ( 
    8.       <> 
    9.      openPortal()}> 
    10.        Open Portal 
    11.      
    12.      {isOpen && ( 
    13.         
    14.          

       

    15.            This Portal handles its own state.{' '
    16.            Close The Portal!, Press ESC or 
    17.            click outside of me. 
    18.          

       
    19.         
    20.      )} 
    21.         
    22.  ) 

     

    来源:TianTianUp内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯