位置: IT常识 - 正文

React--》React组件变化每次都会导致重新渲染,如何解决?(react组件库有哪些)

编辑:rootadmin
React--》React组件变化每次都会导致重新渲染,如何解决?

目录

React.memo

useCallback

useMemo


React.memo

推荐整理分享React--》React组件变化每次都会导致重新渲染,如何解决?(react组件库有哪些),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react 组件三种创建,react 组件三种创建,react组件框架,react组件必不可少的函数,react组件框架,react组件库有哪些,react组件constructor,react组件constructor,内容如对您有帮助,希望把文章链接给更多的朋友!

React组件会在两种情况下下发生渲染

第一种:当组件自身的state发生变化时

第二种:当组件的父组件重新渲染时

第一种情况下重新渲染无可厚非,state都变化了组件自然应该重新进行渲染,但是第二种情况似乎并不是总怎么必要,有时候仅仅只需要父组件重新渲染即可,但是其子组件也跟着渲染,如果是很复杂的逻辑的话,子组件再渲染一遍就会造成资源的浪费,有什么方法能杜绝这种情况呢?

React.memo()是一个高阶组件,它接收另一个组件作为参数,并且会返回一个包装过的新组件,包装过的新组件就会具有缓存作用,包装过后,只有组件的props发生变化时,才会触发组件的重新渲染,否则总是返回缓存中结果。

如下在父组件App中调用子组件A,在子组件A中调用孙组件B,在每个组件当中都打印标识组件渲染的证明,并且在后代组件中使用React.memo,防止组件的重新渲染,具体的实现过程如下图所示实现的过程。

接下来我会将组件渲染的过程一一记录下来,大家仔细看看加入了React.memo后,组件渲染会发生何种变化:

可以看到初次渲染时,所有的组件都会被执行一次,  当点击按钮时,父组件传递给子组件A的props值发生变化导致A组件又被重新渲染一次,接下来仅仅是父组件发生变化,当父组件的值为4的时候会再次导致子组件A的props值发生变化导致子组件A再次被重新渲染,因为孙组件B没有被传入props,导致其只有在初次渲染的时候被被渲染,后面即使父组件发生变化,其也不会重新渲染,具体的过程如上图所示。

useCallback

useCallback这个API作用也是阻止组件渲染的,不知道大家有没有设想过这样一个场景,当子组件调用父组件的方法去修改父组件身上的值的时候,子组件会不会重新被渲染,答案是会的。在知道这个原因的前提下,你应该要明白什么是重新渲染,重新渲染就是整个组件的代码会被重新执行一次,也就是说父组件修改其本身数值的方法也会被重新执行,这就导致了通过props传递给子组件其修改父组件的方法被重新执行变化了,导致子组件会被再一次被重新渲染,也就是说子组件的页面没有发生任何变化,但是子组件仍被重新渲染了,因此不管是用不用上面讲解的React.memo方法,子组件都会被重新渲染,具体效果如下:

React--》React组件变化每次都会导致重新渲染,如何解决?(react组件库有哪些)

有没有办法能够解决这个问题呢?这就要使用useCallback这个API来解决这个办法了。

useCallback是一个钩子函数,用来创建React中的回调函数,创建的回调函数不会总在组件重新渲染时重新创建,具体实现过程如下:

下图很明显,第一次创建时所有组件都会渲染一次,当修改父组件的值时,使用usecallback之后,其函数不会再被重新创建,这也就让其子组件不会再被重新渲染,完美解决问题。

useMemo

上面两个方法都是讲解组件与组件之间减少渲染的次数,那么组件自身能不能减少渲染的范围呢?要知道我们一旦对当前组件进行数值修改,当前组件就会被重新渲染,也就是说当前组件的所有代码都会被再次执行一次,但是再某种场景下,我仅仅是想修改当前组件某一处的数值,并没有想修改整个组件,但是整个组件都给我渲染一遍,这种是不是也会造成资源的浪费,给出如下情景:

import React, { useState } from 'react'const sumFun = (a,b) =>{ console.log('函数被重新执行了'); return a + b}const App = () => { const [count,setCount] = useState(0) const sum = sumFun(12,14) const addHandler = () =>{ setCount(prevState => prevState + 1) } return ( <div> <h2>当前函数的和为:{sum}</h2> <h3>App根组件--当前值为:{count}</h3> <button onClick={addHandler}>点击+1</button> </div> )}export default App

我仅仅是想增加当前组件的值,而函数是写死的,就是渲染一个数值而已,但是其被迫跟着整个组件重新渲染了,结果如下:

让我们设想这样一个场景:sumFun函数冤枉的说:我啥也没干你凭啥让我再重新执行一次,我: 让你执行就执行,废什么话,随大流懂不懂,sumFun怒气冲冲的说:这可是你说的,你不仁别怪我不义了,sumFun怀恨在心打出以下函数:

由于sumFun函数的骚操作,导致整个组件的运行被sumFun一人给阻塞掉了,必须等待sumFun执行完成,整个组件才会被重新渲染,一个人有问题了,整个组件都需要等待他,这就很被动了,于是我说:sumFun快收了神通吧,有没有啥办法能够解决它啊

接下来开始useMemo登场使用,给出如下代码:

import React, { useState,useMemo } from 'react'const sumFun = (a,b) =>{ const begin = Date.now() // 获取当前的时间戳 while(1){ if(Date.now() - begin > 3000){ // 死循环,必须让其等待三秒才break出去跳出循环 break } } console.log('函数被重新执行了'); return a + b}const App = () => { const [count,setCount] = useState(0) let a = 100 let b = 120 if(count % 10 === 0){ a+=count } const sum = useMemo(()=>{ return sumFun(a,b) },[a,b]) const addHandler = () =>{ setCount(prevState => prevState + 1) } return ( <div> <h2>当前函数的和为:{sum}</h2> <h3>App根组件--当前值为:{count}</h3> <button onClick={addHandler}>点击+1</button> </div> )}export default App

由于sumFun被useMemo包裹,这就导致其只有在a和b发生变化时才会被重新渲染,如下:

并不是以后的项目都需要限制重新渲染,代码逻辑简单组件功能少的完全是没必要的,影响极小,只要在特别情况下或者说项目复杂要追求效率的场景下,渲染限制组件重新渲染获取是一个不错的选择。

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

上一篇:基于RuoYi框架自动生成后端代码及前端界面(ruoyi框架快速入门)

下一篇:vue3 + ts: layout布局(vue3+ts+vite)

  • wps怎么画一条直线(wps怎么画一根竖线)

    wps怎么画一条直线(wps怎么画一根竖线)

  • 小米屏幕使用时间在哪里找呢(小米屏幕使用时长怎么设置)

    小米屏幕使用时间在哪里找呢(小米屏幕使用时长怎么设置)

  • 苹果实体店有教育优惠吗(苹果实体店有教育优惠没有学生证怎么办)

    苹果实体店有教育优惠吗(苹果实体店有教育优惠没有学生证怎么办)

  • 荣耀20s有红外线功能吗(荣耀80pro 红外)

    荣耀20s有红外线功能吗(荣耀80pro 红外)

  • 抖音怎么用一个手机号注册两个号(抖音怎么用一个身份证认证多个号)

    抖音怎么用一个手机号注册两个号(抖音怎么用一个身份证认证多个号)

  • 三星手机软件在桌面消失了(三星手机 软件)

    三星手机软件在桌面消失了(三星手机 软件)

  • 天猫可以报名双十二吗(新开的天猫可以报名双十一吗)

    天猫可以报名双十二吗(新开的天猫可以报名双十一吗)

  • excel怎么制作图表(Excel怎么制作图像)

    excel怎么制作图表(Excel怎么制作图像)

  • 腾讯直播和微信直播有什么区别(腾讯直播和微信直播比较)

    腾讯直播和微信直播有什么区别(腾讯直播和微信直播比较)

  • qq管理员上限是多少(qq管理员最多几个)

    qq管理员上限是多少(qq管理员最多几个)

  • 6.35英寸的手机有多大(6.63英寸手机)

    6.35英寸的手机有多大(6.63英寸手机)

  • qq的匿名投票能看谁投过票(qq上匿名投票可以看见名字吗)

    qq的匿名投票能看谁投过票(qq上匿名投票可以看见名字吗)

  • 苹果手机没有耳机孔怎么办(苹果手机没有耳机孔怎么插银行u盾)

    苹果手机没有耳机孔怎么办(苹果手机没有耳机孔怎么插银行u盾)

  • 手机序列号是哪个(手机序列号是哪个怎么有2个)

    手机序列号是哪个(手机序列号是哪个怎么有2个)

  • word的视图方式(以下不属于word的视图方式)

    word的视图方式(以下不属于word的视图方式)

  • 手机2g在线有几种可能(手机2g在线有几种可能2019)

    手机2g在线有几种可能(手机2g在线有几种可能2019)

  • 怎样把备忘录存成图片(怎样把备忘录存成一张长图)

    怎样把备忘录存成图片(怎样把备忘录存成一张长图)

  • ipadpro分屏怎么开启(ipadpro分屏怎么用)

    ipadpro分屏怎么开启(ipadpro分屏怎么用)

  • 多了的空白页怎么删除(多了的空白页怎么删除掉)

    多了的空白页怎么删除(多了的空白页怎么删除掉)

  • 手机qq怎么送q币(手机qq如何送q币给好友)

    手机qq怎么送q币(手机qq如何送q币给好友)

  • 为什么提示数据透视表字段名无效(为什么提示数据流量不足)

    为什么提示数据透视表字段名无效(为什么提示数据流量不足)

  • 香山在哪里个省(香山位于哪个省市)

    香山在哪里个省(香山位于哪个省市)

  • 爱剪辑怎么两个视频同框(爱剪辑怎么两个画面同步)

    爱剪辑怎么两个视频同框(爱剪辑怎么两个画面同步)

  • 12.4.1关闭了吗(14.2.1关闭了吗?)

    12.4.1关闭了吗(14.2.1关闭了吗?)

  • 拼多多怎么获得免拼单(拼多多怎么获得券)

    拼多多怎么获得免拼单(拼多多怎么获得券)

  • 电脑下载的文件在哪里(电脑下载的文件打不开怎么回事)

    电脑下载的文件在哪里(电脑下载的文件打不开怎么回事)

  • 利用网络交换文字信息的非交互式服务称为(利用网络交换文字信息的非交互服务称为)

    利用网络交换文字信息的非交互式服务称为(利用网络交换文字信息的非交互服务称为)

  • 公对公打款开票
  • 利润表中其他业务利润是什么
  • 记账凭证附单据是有哪些
  • 支付宝理财提现到银行卡有费用吗
  • 零售化妆品交什么税种
  • 损益类科目是否可以转出
  • 申报个税人员金额一般
  • 收到股权回购款是什么意思
  • 销售煤炭增值税怎么算
  • 留抵进项税额
  • 契税差别
  • 小规模纳税人帮别人报关
  • 工程结算与工程施工如何结转
  • 税控系统技术维护费抵税怎么申报
  • 租房发票的税由谁承担
  • 数字证书费
  • 扣收手续费
  • 打款与发票开具的会计处理方法是怎样的
  • 工会经费结余怎么记账
  • 成本算错了
  • 融资租赁增值税优惠政策
  • 研发费用申报表汇算清缴怎么填
  • 企业所得税征收标准
  • centos编辑文本
  • 专项维修基金会产生利息吗
  • 共管账户的定义
  • 银行存款总账怎么登记图片
  • 一般纳税人能开1%的发票吗
  • php用img显示图片
  • php504错误
  • libpcap python
  • 付报刊费计入什么科目
  • 跨区域涉税事项报验管理编号怎么填
  • 记账凭证银行利息入息
  • 企业之间收的借款利息该如何交税 原文
  • 劳务费不足800如何入账
  • 智能手机登陆信息怎么删除
  • 公司车辆出售要交多少税
  • 销货退回未开红字发票
  • 个税申报错误怎么退税
  • 建筑企业工程结算账务处理
  • 营业收入的构成分析应该从哪些方面进行?
  • 当月进项税大于销项税怎么办
  • 进项税额有留底怎么做分录
  • 社保个税申报是什么意思
  • 进出口 外汇
  • 红冲发票操作步骤
  • 内部使用的收据可以做原始凭证吗
  • 一般纳税人10万元以下附加税
  • 存货的实际成本法
  • 销项税红字发票如何做账
  • 月底计提工资的会计处理
  • 无形资产占公司比例
  • SQL函数substr使用简介
  • mysql基本表
  • 给Windows Server 2008设一个简单密码
  • centos8 bond0
  • winhlp32.exe - winhlp32是什么进程
  • mac与windows的使用区别
  • adobe windows7
  • xp无法访问win7电脑
  • linux扩大文件系统
  • win10添加功能在哪
  • 修改注册表命令
  • cocos2dx tableview基础:实现多图片的滑动显示
  • unity 游戏开发教程
  • nodequery
  • 只用html和css
  • js 浏览器全屏
  • javascript要怎么学
  • Python制作钟表代码
  • python怎么写多行
  • javascript 加法
  • android系统主要特点
  • 发票与报销内容不一样
  • 开票系统忘记密码怎么找回
  • 工会经费收支办法2022新政策
  • 广西城建投资集团官网
  • 多缴税款可以抵滞纳金吗?
  • 超期未申报还能申报吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设