位置: IT常识 - 正文

React--》一些不常见的hook函数讲解(react.strictmode)

编辑:rootadmin
React--》一些不常见的hook函数讲解

目录

Hook函数

useImperativeHandle

useLayoutEffect和useInsertionEffect与useEffect区别

useDebugValue

useDeferredValue

useTransition


Hook函数

推荐整理分享React--》一些不常见的hook函数讲解(react.strictmode),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react either,react_,react 问题,react有什么坑点,react有什么坑点,react 问题,react bus,react 问题,内容如对您有帮助,希望把文章链接给更多的朋友!

关于React中的钩子函数,在我之间的文章中讲解完我们已经非常熟悉了,钩子函数的功能非常强大而它使用又十分简单。关于钩子函数的使用,我们只需记住两点:

1)钩子函数只能在react组件和自定义钩子中使用

2)钩子函数不能再嵌套函数或其他语句(if、switch、white、for等)中使用

接下来开始介绍一些在日常开发中不是那么常用的钩子函数,但是在某个时刻可能你需要用到它:

useImperativeHandle

你可以设置一个场景,父子组件相互传递值和方法对你来说都没有任何问题,但是我想让你直接去修改子组件的某个dom元素的值呢?一开始你是不是有点懵不知道如何下手,react官方给我们提供了一个钩子函数 useImperativeHandle 专门解决这个问题。具体的介绍可以参考 官方文档 这里仅仅提供一个案例。

修改子组件中的 h2 标题内容,可以在该组件中通过forwardRef来指定要暴露给外部组件的ref

import React, { useEffect, useRef, useState } from 'react'const App = () => { const [count,setCount] = useState(0) const ChildRef = useRef() const addCount = () =>{ setCount(pre => pre+1) } useEffect(()=>{ ChildRef.current.innerText = 'Child' + count }) return ( <div> <h2>App根组件--{count}</h2> <button onClick={addCount}>+1</button> <Child ref={ChildRef} /> </div> )}// 定义一个App子组件const Child = React.forwardRef((props,ref) =>{ return ( <div> <h3 ref={ref}>Child子组件</h3> </div> )})export default App

这种 forwardRef 向外直接暴露ref虽然能够达到一些效果,但是有点不安全,让子组件的dom元素直接脱离子组件本身掌控,由别的组件进行掌握,这让代码也变得难以维护,所以这种方法虽然可行但是不是很可取,所以我们需要更为合适的 useImperativeHandle 钩子函数来处理,如下:

如果父组件想修改子组件中的数据的话,也可以调用子组件中的方法,如下:

import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'const App = () => { const [count,setCount] = useState(0) const ChildRef = useRef() const addCount = () =>{ setCount(pre => pre+1) } useEffect(()=>{ ChildRef.current.changeInputValue(count) }) return ( <div> <h2>App根组件--{count}</h2> <button onClick={addCount}>+1</button> <Child ref={ChildRef} /> </div> )}// 定义一个App子组件const Child = React.forwardRef((props,ref) =>{ const myRef = useRef() useImperativeHandle(ref,()=>{ return { changeInputValue(val){ myRef.current.value = val } } }) return ( <div> <h3>Child子组件</h3> <input ref={myRef} type="text" /> </div> )})export default App

useLayoutEffect和useInsertionEffect与useEffect区别React--》一些不常见的hook函数讲解(react.strictmode)

在了解这三者的区别之前,我们应该知道他们的执行时机分别在哪一时刻,如下:

useLayoutEffect:useLayoutEffect的方法签名和useEffect一样,功能也类似,不同的是其执行时机比useEffect要早,其会在DOM改变后调用,useLayoutEffect使用场景不多,在实际开发中在其要修改元素样式且使用useEffect会出现闪烁现象时可以使用该钩子函数进行替换,当然这种情况在react18版本之前的差异性比较明显,而到了react18之后两者的差异几乎是没有了,这里简单提及一下。

当然,我还是推荐大家使用经典的useEffect,当你的项目使用useEffect而遇到一些问题之后,也可以考虑一下是否是执行时机的问题,这里的话就可以使用另外两个钩子函数了。

useDebugValue

介绍一个类似于玩具的钩子函数,用来给自定义钩子设置标签,标签会在react开发者工具中显示,用来调试自定义钩子,但是不常用,如下:

会在开发者工具中对自定义钩子进行标识,作用嘛为了后期的代码调试,但是我感觉作用不大,大家了解一下即可:

useDeferredValue

useDeferredValue用来设置一个延迟的state,比如我们创建一个state,并使用useDeferredValue获取延迟值。延迟值可以使用在这样一个场景中,一个state需要在多个组件中使用,但是一个组件渲染比较快另一个组件渲染比较慢,这样我们可以为该state创建一个延迟值,渲染组件快的组件使用正常的state优先显示,渲染慢的组件使用延迟值慢一步渲染,当然这里必须结合React.memo或useMemo才能发挥其作用,不了解这两个函数的可以先参考我之前的文章对其的讲解:React组件变化每次都会导致重新渲染,如何解决?,现在开始着重讲解这个钩子函数的使用

具体操作可参考官方示例:

useTransition

当我们在组件中修改state时,会遇到复杂一些的state,当修改这些state时,甚至会阻塞到整个应用的运行,为了降低这种state的影响,react为我们提供了useTransition,通过useTransition可以降低setState的优先级。

useTransition会返回一个数组,数组中有两个元素,第一个元素是isPending,它是一个变量用来记录transition是否在执行中,第二个元素是startTransition,它是一个函数,可以将setState在其回调函数中调用,这样setState方法会被标记为transition并不会立即执行,而是在其他优先级更高的方法执行完毕才会执行。

还有一个钩子函数为useId:生成唯一id,使用于需要唯一id的场景,但是适用于列表的key,这里简单的提一下。

本文链接地址:https://www.jiuchutong.com/zhishi/295265.html 转载请保留说明!

上一篇:Vue3中样式渗透:deep()为什么无效(vue的样式穿透)

下一篇:Vue常见错误---Error in mounted hook(vue err)

  • 罗技键盘怎么连接ipad(罗技键盘怎么连接台式电脑)

    罗技键盘怎么连接ipad(罗技键盘怎么连接台式电脑)

  • ipad青少年模式在哪里设置(ipad青少年模式在哪里关掉)

    ipad青少年模式在哪里设置(ipad青少年模式在哪里关掉)

  • excel如何拆分单元格(excel如何拆分单元格分行)

    excel如何拆分单元格(excel如何拆分单元格分行)

  • 华为荣耀20处理器是什么(华为荣耀20处理器是什么型号)

    华为荣耀20处理器是什么(华为荣耀20处理器是什么型号)

  • 手机拍照wb什么意思(手机照相中的wb是什么意思?)

    手机拍照wb什么意思(手机照相中的wb是什么意思?)

  • 学习通有网页版吗

    学习通有网页版吗

  • 微信拉黑又删除会显示什么(微信拉黑又删除了对方还能加我吗)

    微信拉黑又删除会显示什么(微信拉黑又删除了对方还能加我吗)

  • 苹果se与华为p40对比(华为p40与2020苹果se参数对比)

    苹果se与华为p40对比(华为p40与2020苹果se参数对比)

  • 文件夹可以发送到微信吗(文件夹可以发送给QQ好友吗)

    文件夹可以发送到微信吗(文件夹可以发送给QQ好友吗)

  • 华为matex在哪里买

    华为matex在哪里买

  • 什么是识别距离(什么是识别距离的软件)

    什么是识别距离(什么是识别距离的软件)

  • 苹果x输入密码后就卡住了(苹果X输入密码界面数字失灵)

    苹果x输入密码后就卡住了(苹果X输入密码界面数字失灵)

  • iphonexs是双卡双待吗(苹果iphonexs双卡双待)

    iphonexs是双卡双待吗(苹果iphonexs双卡双待)

  • 苹果6有nfc功能吗(苹果6nfc功能在哪里设置)

    苹果6有nfc功能吗(苹果6nfc功能在哪里设置)

  • 华为荣耀9i有人脸识别吗(荣耀9iemui)

    华为荣耀9i有人脸识别吗(荣耀9iemui)

  • 苹果应用与数据在哪里(苹果应用与数据怎么设置)

    苹果应用与数据在哪里(苹果应用与数据怎么设置)

  • wifi自动下载怎么关闭(wifi自动下载安装包)

    wifi自动下载怎么关闭(wifi自动下载安装包)

  • 手机流量怎么送人(手机流量怎么送给别人手机上怎么操作)

    手机流量怎么送人(手机流量怎么送给别人手机上怎么操作)

  • cad怎么新建空白图纸(cad怎么新建空白文件)

    cad怎么新建空白图纸(cad怎么新建空白文件)

  • 百度云视频怎么投屏(百度云视频怎么免费倍速)

    百度云视频怎么投屏(百度云视频怎么免费倍速)

  • u段和v段哪个距离远(u段与v段)

    u段和v段哪个距离远(u段与v段)

  • 华为手机支付保护中心有什么用(华为手机支付保护)

    华为手机支付保护中心有什么用(华为手机支付保护)

  • 抖音里面的视频怎么制作的(抖音里面的视频怎么删除掉)

    抖音里面的视频怎么制作的(抖音里面的视频怎么删除掉)

  • win10默认网关是什么详细介绍(windows默认网关应该设置为的地址)

    win10默认网关是什么详细介绍(windows默认网关应该设置为的地址)

  • vue系列(三)——手把手教你搭建一个vue3管理后台基础模板(vue系列教程)

    vue系列(三)——手把手教你搭建一个vue3管理后台基础模板(vue系列教程)

  • 从价从量复合计征
  • 无形资产多摊销了怎么办
  • 增值税 抵扣联
  • 个税汇算清缴为啥要补交
  • 离职补偿金怎么做账
  • 公司税务状态变更怎么办
  • 企业所得税前扣除是什么意思
  • 社保基金会割肉操作吗
  • 增值税普通发票查询真伪
  • 在建工程试运行收入和成本怎么处理
  • 公司成立前购买的设备算个人还是公司
  • 员工拿发票报销可以公转私吗
  • 所得税预提多了怎么处理
  • 银行抵债资产怎么管理
  • 季度末需要结转什么科目
  • 银行手续费跨月怎么计算
  • 增值税税控系统技术维护费计入什么科目
  • 现金流量表右边
  • 先入库发票未到分录
  • 销售额是含税价还是不含税
  • 餐饮行业采购流程图
  • 不计入工资薪金所得的有哪些补贴
  • 初级考试备考计划
  • 红字增值税专用发票信息表怎么填
  • 固定资产折旧转入什么科目
  • 汇总表格怎么设置
  • 小规模租赁收入申报流程
  • 支付境外关联方借款利息需要的
  • 个人取得的哪些收入属于经营所得
  • 生产设备投资入股增值税
  • ie异常
  • 商品入库没有收到发票
  • 交割单和对账单一样吗
  • 冲减多计提的工会经费调账说明
  • 房屋租赁收入确认条件新准则
  • 企业所得税预缴申报
  • 咨询服务费需要交印花税吗
  • PHP+Mysql+jQuery实现发布微博程序 php篇
  • 前端登录退出怎么操作
  • 在承租土地上建房是否应核算为固定资产会计视野
  • php中session和cookie
  • 微信小程序登录的账号怎么注销
  • 工程收到款项会计分录
  • java编程入门基础教程
  • 现金报销医药费
  • 缴纳的印花税怎么入账
  • php判断数据类型
  • mongorepository排序
  • sql存储过程几个主要步骤
  • 企业结售汇业务需要做什么
  • 电汇和票汇
  • show processlist
  • 其它应付款的审计内容
  • 预付款预缴如何做账
  • 专利财政补贴
  • 产房日常维修费用
  • 跨年工程施工如何计算成本
  • 计提附加税金额
  • 预借差旅费的借贷方
  • 如何开具发票?
  • prometheus operator
  • bios界面uefi
  • win7 word
  • Mac如何更换壁纸
  • swupdtmr.exe - swupdtmr进程是什么意思 什么作用
  • win7旗舰版显示器亮度调节
  • win10小娜怎么用不了
  • linux 常见
  • android yield
  • Python scikit-learn 做线性回归的示例代码
  • python多进程模块
  • python读取文件指定内容
  • 分页jsp
  • javascript用处
  • js基于什么
  • c# addin
  • 请领导批示的格式
  • 上海餐饮增值税
  • 房屋赠与给子女要交多少税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设