文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

推荐十一个React Hook库

2024-12-03 18:13

关注

 Hooks来了,并在暴风雨中占领了React社区。自最初发布以来已经有一段时间了,这意味着有很多支持库。在搜索与React相关的内容时,很难不说“ hook”。如果你们还没有使用它的话,应该尽快将它们加入代码库。它们将使您的编码生活变得更加轻松和愉快。

在React开发中,保持干净的代码风格,可读性,可维护性,更少的代码行以及可重用性至关重要。本篇文章将向您介绍应立即开始使用的十一个React Hook库。不用再拖延了,让我们开始吧。

1.use-http
use-http是一个非常有用的软件包,可用来替代Fetch API。以高质量编写和维护。它使您的编码更简单易懂,更精确地讲是数据处理部分。hook本身使用TypeScript,甚至支持SSR和GraphQL。它返回响应,加载,错误数据和不同的请求方法,例如Get,Post,Put,Patch和Delete。

它提供的主要功能是:

CodeSandbox示例和Youtube视频以及GitHub自述文件都对此进行了很好的记录。

官网地址:https://use-http.com/#/

使用案例

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

2.useMedia
您是否需要一种跟踪CSS媒体查询的方法?该useMedia hook提供一个简单的方法解决问题。这是一个准确跟踪React sensor hook。媒体查询以及任何应用程序或网站的响应能力都非常重要。

它提供了支持TypeScript编写。该软件包具有定义明确的文档,其中解释了挂钩的用法以及测试方法。

地址:https://github.com/streamich/use-media

使用案例:

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

3.Constate
Constate是一个hook package,可将本地状态提升到React Context。这意味着可以以最小的努力轻松地将任何组件的任何状态提升到上下文。如果您想在多个位置使用相同的状态,或者为多个组件提供相同的状态,这很有用。该名称来自合并上下文和状态的文字游戏。使用Typescript写的,体积很小。虽然该文档不是很详细,但是可以完成工作。

地址:https://github.com/diegohaz/constate

使用案例:

  1. import React, { useState } from "react"
  2. import constate from "constate"
  3.  
  4. // custom hook 
  5. function useCounter() { 
  6.   const [count, setCount] = useState(0); 
  7.   const increment = () => setCount(prevCount => prevCount + 1); 
  8.   return { count, increment }; 
  9.  
  10. // hook passed in constate 
  11. const [CounterProvider, useCounterContext] = constate(useCounter); 
  12.  
  13. function Button() { 
  14.   // use the context 
  15.   const { increment } = useCounterContext(); 
  16.   return +; 
  17.  
  18. function Count() { 
  19.   // use the context 
  20.   const { count } = useCounterContext(); 
  21.   return {count}
  22.  
  23. function App() { 
  24.   // wrap the component with provider 
  25.   return ( 
  26.      
  27.       <Count /> 
  28.        
  29.      
  30.   ); 

4.Redux hooks
Redux是许多(即使不是全部)React开发人员的知名工具。在整个应用程序中,它用作全局状态管理器。在React的最初版本发布几个月后,它就随钩而上了。它通过现有connect()方法提供了HOC(高阶组件)模式的替代方法。

提供的最著名的hooks是:

该文档非常好,有点复杂,但是它将为您提供开始使用它们所需的任何信息。

地址:https://github.com/reduxjs/redux

使用案例:

  1. import {useSelector, useDispatch} from "react-redux"
  2. import React from "react"
  3. import * as actions from "./actions"
  4.  
  5. const Example = () => { 
  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 
  16.     
 
  • ); 
  • }; 
  • 5.React hook form
    React hook form是一个与Formik和Redux表单相似的表单校验hook库,但是更好!凭借其更简单的语法,速度,更少的转译和更好的可维护性,它开始爬上GitHub的阶梯。它的体积很小,并且考虑到性能而构建。该库甚至提供了它的表单生成器,这很棒!它是React钩子库(14.8k)中GitHub启动数量最多的平台之一。

    它提供的主要功能:

    地址:https://github.com/react-hook-form/react-hook-form

    使用案例:

    1. import React from "react"
    2. import { useForm } from "react-hook-form"
    3.  
    4. function App() { 
    5.   const { register, handleSubmit, errors } = useForm(); 
    6.   const onSubmit = (data) => { 
    7.     // logs {firstName:"exampleFirstName", lastName:"exampleLastName"
    8.     console.log(data); 
    9.   }; 
    10.  
    11.   return ( 
    12.      
    13.       name="firstName" ref={register} /> 
    14.       name="lastName" ref={register({ required: true })} /> 
    15.       {errors.lastName && "Last name is a required field."
    16.       name="age" ref={register({ required: true })} /> 
    17.       {errors.age && "Please enter number for age."
    18.       "submit" /> 
    19.      
    20.   ); 

    6.useDebounce
    useDebounce 表示一个用于去抖的小钩子。它用于将功能执行推迟到以后。常用于获取数据的输入和表格中。

    地址:https://github.com/xnimorz/use-debounce

    使用案例:

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

      Value: {text}

       
    17.       

      Debounced value: {value}

       
    18.     
     
  •   ); 
  • 7.useLocalStorage
    useLocalStorage是一个小钩子,与上面的钩子一样。这对于在localStorage中提取和设置数据非常有用。操作变得容易。提供跨多个选项卡的自动JSON序列化和同步,并以TypeScript编写,因此它提供了类型。

    文档以高质量的方式编写,并且可以通过扩展示例来很好地理解。

    地址:https://github.com/rehooks/local-storage

    使用案例:

    1. import React, { useState } from "react"
    2. import { writeStorage } from '@rehooks/local-storage'
    3.  
    4. export default function Example() { 
    5.   let counter = 0; 
    6.   const [counterValue] = useLocalStorage('counterValue'); 
    7.  
    8.   return ( 
    9.     
       
    10.       {counterValue} 
    11.        writeStorage('i', ++counter)}> 
    12.         Click Me 
    13.        
    14.      
    15.   ); 

    8.usePortal
    usePortal 使创建下拉菜单,模态,通知弹出窗口,工具提示等变得非常容易!它提供了在应用程序的DOM层次结构之外创建元素的信息(react docs)。该钩子与SSR一起使用,因为它是同构的。用TypeScript编写并具有内置状态。它还提供了portals样式和大量其他选项的完全定制。

    为此编写的文档非常好,其中显示了许多示例,这些示例对于开始使用库/自己做钩子来说绰绰有余。

    地址:https://github.com/alex-cory/react-useportal

    使用案例:

    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 me!, hit ESC or 
    17.                 click outside of me. 
    18.               

       
    19.              
    20.           )} 
    21.         
    22.  ) 

    9.useHover
    useHover是一个React state hook,它确定是否正在hover React元素。简单易用。该库很小,易于使用,但如果您有足够的创造力,它可能会很强大。

    它还提供了悬停效果的延迟。支持TypeScript。文档没有那么详细,但是它将向您展示如何正确地使用它。

    地址:https://github.com/andrewbranch/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 me 
    8.       {isHovering ? 
       I’m a little tooltip! 
       : null
    9.      
    10.   ); 

    10.React router hooks
    React router hooks是React最受欢迎的库之一。它用于路由和获取应用程序URL历史记录等。它与Redux一起实现了用于获取此类有用数据的hook。

    它提供的主要功能是:

    useHistory
    useLocation
    useParams
    useRouteMatch
    它的名字很不言自明。UseHistory将获取应用程序历史记录和方法的数据,例如push推送到新路由。UseLocation将返回代表当前URL的对象。UseParams将返回当前路径的URL参数的键-值对的对象。最后,useRouteMatch将尝试将当前URL与给定URL进行匹配,给定URL可以是字符串,也可以是具有不同选项的对象。

    文档很好,写了很多例子

    地址:https://github.com/ReactTraining/react-router

    使用案例:

    1. import { useHistory, useLocation, useRouteMatch } from "react-router-dom"
    2.  
    3. const Example = () => { 
    4. let history = useHistory(); 
    5. let location = useLoction(); 
    6. let isMatchingURL = useRouteMatch("/post/11"); 
    7.  
    8. function handleClick() { 
    9.     history.push("/home"); 
    10.  
    11. return ( 
    12.     
       
    13.         Current URL: {location.pathname} 
    14.         {isMatchingURL ? Matching provided URL! Yay!  : null
    15.         "button" onClick={handleClick}> 
    16.             Go home 
    17.          
    18.  
    19. ); 

    11.react-use
    react-use是一个必不可少的 React Hooks集合.你需要安装React 16.8.0或更高版本才能使用Hooks API。

    地址:github.com/streamich/react-use

    使用案例:

    1. import {useBattery} from 'react-use'
    2.  
    3. const Demo = () => { 
    4.   const state = useBattery(); 
    5.  
    6.   return ( 
    7.     
       
    8.       {JSON.stringify(state, null, 2)} 
    9.     
     
  •   ); 
  • }; 
  • 当前还有更多的钩子库,找到适合自己使用的就是最好的,不仅提高了开发的效率,而且让代码更加整洁,简单。

     

    来源:小丑的小屋内容投诉

    免责声明:

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

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

    软考中级精品资料免费领

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

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

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

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

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

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

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