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

news/2024/10/31 7:32:58/

目录

React.memo

useCallback

useMemo


React.memo

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方法,子组件都会被重新渲染,具体效果如下:

有没有办法能够解决这个问题呢?这就要使用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 = 100let b = 120if(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发生变化时才会被重新渲染,如下:

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


http://www.ppmy.cn/news/65777.html

相关文章

Centos 7 配置和使用 MySql 8.0 以及API

1 检查环境 [rootcentos7 opt]# rpm -qa | grep mariadb 有则卸载 mariadb &#xff1a;&#xff08;显示什么卸载什么&#xff09; [rootcentos7 opt]# rpm -e --nodeps mariadb-libs [rootcentos7 opt]# rpm -e --nodeps mariadb-devel-5.5.65-1.el7.x86_642 安装依赖 [ro…

自动修改文章的软件-文章原创软件

免费版自动修改文章的软件 免费版自动修改文章的软件是一种又快速、易用且免费的文章修改软件&#xff0c;可以帮助用户批量修改文章和图文&#xff0c;并为用户提供高质量的修改服务。用户仅需上传待修改的文章文件&#xff0c;软件就能自动检测出文章中的语法、拼写错误和表…

OpenCV教程——图像模糊。均值模糊,高斯模糊,中值模糊,双边模糊,高斯分布

1.图像模糊 图像模糊是图像处理中最简单和常用的操作之一。 ⚠️使用该操作的原因之一是为了给图像预处理时降低噪声。 图像模糊操作背后是数学的卷积计算。 卷积操作的原理&#xff1a; 常用的图像模糊的方法&#xff1a; 均值模糊高斯模糊中值模糊双边模糊 这四种模糊方式…

prometheus实战之四:alertmanager的部署和配置

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文是《prometheus实战》系列的第四篇&#xff0c;在《prometheus实战之三&#xff1a;告警规则》中曾经提到过&#xff0c;整个告警功能分为规则和…

七、Zookeeper注册中心

目录 1、下载Zookeeper的服务jar包 2、下载好jar包后解压放到合适的目录&#xff08;目录最好不要有中文及空格&#xff09; 3、进入解压后的conf目录&#xff0c;复制zoo_sample.cfg文件并重命名为zoo.cfg&#xff0c;修改zoo.cfg文件内容如下 4、运行bin目录下的zkServer…

PowerShell

2023年5月12日&#xff0c;周五晚上&#xff1a; 今天突然对看到了一篇关于Linux的Shell的文章&#xff0c;引起了我的兴趣&#xff0c;但由于我的电脑没有虚拟机&#xff0c;所以我决定研究研究一下windows的PowerShell&#xff0c;感觉还挺好玩的。 打开了一个新世界。 不…

Vmware ESXi 5.0 安装与部署

在虚拟化领域VMware、Citrix、Microsoft都有不错的解决方案而在服务器虚拟化领域VMware又占据着领导者地位游侠www.2cto.com今天也装了个平台与大家一起分享。   VMware的虚拟化产品就个人、小企业而言有Workstation、ESXivSphere免费版、VMwareServer免费版可以选择由于Work…

使用Visual Studio 2019 创建JNI式的动态库及在Java代码中的使用

文章目录 JNI简介JNI 数据类型与 Java 、C 类型对比JNI式动态库函数编码规则Visual Studio下的编码JNI式动态库在Java代码中的使用改进版通过javah命令自动生成.h文件 JNI简介 JNI (Java Native Interface) 是 Java 沟通 Native 语言&#xff08;主要是C、C&#xff09;的桥梁…