位置: 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)

  • 进项税额怎么抵税
  • 城建税的征税范围不包括农村对不对
  • 企业土地使用税征收标准
  • 企业注销,账面余额怎样调账
  • 建筑公司劳务分包抵扣分录
  • 个税申报逾期罚款怎么交
  • 代收代付保险费的差额可以放入营业外收入么
  • 应付职工薪酬期末余额在借方表示什么
  • 外地发票是什么意思
  • 会计和税法折旧年限不同如何计算终结期现金净流量
  • 废料账务处理
  • 非货币性资产交换的会计处理
  • 购买设备的增值税是支出吗
  • 土地转让差额征税开票及申报表填写
  • 增值税发票对方已认证怎么冲红
  • 人工费收税吗
  • 河道工程维护管理费征收
  • 投资者减除费用可以填0吗
  • 往来账的作用
  • 税控盘服务费每年都可以抵吗
  • 销售技巧培训课程
  • 给员工租房会承担什么责任
  • 剑灵配置要求2020官方
  • 公司股权转让怎么操作
  • 差额征收是啥意思
  • asldrsrv.exe
  • php写木马
  • 周转材料的领用及摊销方法
  • 索尔兹伯里评价
  • php快速推送微信内容
  • 实收资本(或股本)是什么意思
  • 汽车检测没过收钱不
  • 增值税发票已认证抵扣还可以进项税额转出吗
  • 建筑企业其他应付款
  • 小规模能取得专用发票吗
  • 客户的赔偿金会计分录
  • c标准库pdf下载
  • 国网统一开发平台uap
  • 一般纳税人之间转让土地使用权交哪些税金
  • 税控盘技术服务费抵扣期限
  • 解决掉发的有效方法
  • db2入门
  • sql server s
  • 单位外币卡账户的资金应从其单位的外汇账户转账存入
  • 开具发票的原则有哪些呢?
  • 什么叫公关费用
  • 文化事业建设费会计分录
  • 出纳去银行存现
  • 运输公司车辆保养记录表格
  • 增值税计提多了已经跨年度怎么办
  • 发票冲红如何做账红字发票需要给购买方吗
  • 挂靠被查出来后挂靠费怎么处理?
  • 暂估入库做账
  • 投资性房地产收回自用
  • 代扣代缴完税凭证抵扣期限
  • 主营业务成本包括哪些费用
  • 明细分类账的填写
  • 高新技术企业享受优惠时间
  • php中常用的几个字符
  • sql四种功能
  • 在centos上安装ftp服务应运行指令
  • sqlserver2000数据库文件在哪个文件夹
  • win8系统怎样查看本机的ip地址
  • 如何创建一个wifi
  • macbook快捷操作大全
  • linux中内存是2GB,虚拟内存应该是多少
  • win7如何删除网络上的其它计算机
  • win7空间不足c盘
  • es6中的class常见使用场景
  • bootstrap和jsp
  • linux中的命令及含义
  • 批处理获取本地连接名称
  • Jquery中巧用Ajax的beforeSend方法
  • 置顶是怎么弄的
  • 企业所得税法中所称有关的支出是指
  • 云南地方税务局电话
  • 浙江国税咨询电话12306
  • 海关税目表
  • 江苏税务登记证查询
  • 福建平潭综合实验区属于哪个市
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设