【 React 】React render方法的原理?在什么时候会被触发?

1. 原理

首先,render函数在react中有两种形式:
在类组件中,指的是render方法:

class Foo extends React.Component {render() {return <h1> Foo </h1>; } 
}

在函数组件中,指的是函数组件本身:

function Foo() {return <h1> Foo </h1>;
}

在render中,我们会编写jsx,jsx通过babel编译后就会转化成我们熟悉的js格式,如下:

return ( <div className='cn'><Header> hello </Header> <div> start </div>Hello Rui</div> 
)

babel编译后

return (React.createElement('div', {className : 'cn'},React.createElement(Header,null,'hello'),React.createElement('div',null,'start'),'Hello Rui') 
)

从名字上来看,createElement方法用来创建元素的 在react中,这个元素就是虚拟DOM树的节点,接收三个参数:

  • type:标签
  • attributes:标签属性,若无则为null
  • children:标签的子节点

这些虚拟DOM树最终会渲染成真实DOM

在render过程中,React将新调用的render函数返回的树与旧版本的树进行比较,这一步是决定如何更新DOM的必要步骤,然后进行diff比较,更新DOM树

2. 触发时机

render的执行时机主要分成了两部分:
● 类组件调用setState修改状态

class Foo extends React.Component {state = { count: 0 };increment = () => {const { count } = this.state;const newCount = count < 10 ? count + 1 : count;this.setState({ count: newCount });};render() {const { count } = this.state;console.log("Foo render");return ( <div> <h1> {count} </h1> <button onClick={this.increment}>Increment</button></div> );}
}

点击按钮则调用setState方法,无论count发生变化辩护,控制台都会输出Foo render ,证明render执行了
● 函数组件通过useState hook修改状态

function Foo() {const [count, setCount] = useState(0);function increment() {const newCount = count < 10 ? count + 1 : count;setCount(newCount); }console.log("Foo render");return (<div> <h1> {count} </h1> <button onClick={increment}>Increment</button></div> ); 
}

函数组件通过useState这种形式更新数据,当数组的值不发生改变了,就不会触发render
● 类组件重新渲染

class App extends React.Component {state = { name: "App" };render() {return ( <div className="App"> <Foo /> <button onClick={() => this.setState({ name: "App" })}>Change name</button></div>); } 
}
function Foo() {console.log("Foo render");return (<div> <h1> Foo </h1></div>);
}

只要点击了App组件内的Change name按钮,不管Foo其体实现是什么,都会被重新render渲染
● 函数组件重新渲染

function App(){const [name,setName] = useState('App')return (<div className="App"> <Foo /><button onClick={() => setName("aaa")}> { name }</button></div> )
}
function Foo() {console.log("Foo render");return (<div> <h1> Foo </h1></div> ); 
}

可以发现,使用useState来更新状态的时候,只有首次会触发Foo render ,后面并不会导致Foo render

3. 总结

render函数里面可以编写JSX,转化成createElement这种形式,用于生成虚拟DOM,最终转化成真实DOM

在React中,类组件只要执行了setState方法,就一定会触发render函数执行,函数组件使用useState更改状态不一定导致重新render

组件的props改变了,不一定触发render函数的执行,但是如果props的值来自于父组件或者祖先组件的state
在这种情况下,父组件或者祖先组件的state发生了改变,就会导致子组件的重新渲染

所以,一旦执行了setState就会执行render方法,useState会判断当前值有无发生改变确定是否执行render方法,一旦父组件发生渲染,子组件也会渲染

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/755006.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows11安装SQL server数据库报错等待数据库引擎恢复句柄失败(二)

windows11安装SQL server数据库报错等待数据库引擎恢复句柄失败&#xff08;二&#xff09;&#xff0c;昨天在给网友远程的时候发现了一个新的问题。 计算机系统同样是Windows11&#xff0c;通过命令查出来的扇区相关结果也都是4096&#xff0c;但是最后的安装还是提示SQL ser…

JVM内存模型深度解读

JVM&#xff08;Java Virtual Machine&#xff0c;Java虚拟机&#xff09;对于Java开发者和运行 Java 应用程序而言至关重要。其重要性主要体现在跨平台性、内存管理和垃圾回收、性能优化、安全性和稳定性、故障排查与性能调优等方面。今天就下学习一下 JVM 的内存模型。 一、…

嵌入式学习40-数据结构

数据结构 1.定义 一组用来保存一种或者多种特定关系的 数据的集合&#xff08;组织和存储数据&#xff09; 程序的设计&#xff1a; …

31-Java前端控制器模式(Front Controller Pattern)

Java前端控制器模式 实现范例 前端控制器模式&#xff08;Front Controller Pattern&#xff09;是用来提供一个集中的请求处理机制&#xff0c;所有的请求都将由一个单一的处理程序处理该处理程序可以做认证/授权/记录日志&#xff0c;或者跟踪请求&#xff0c;然后把请求传给…

使用RabbitMQ,关键点总结

文章目录 1.MQ的基本概念2.常见的MQ产品3.MQ 的优势和劣势3.1 优势3.2 劣势 4.RabbitMQ简介4.1RabbitMQ 中的相关概念 1.MQ的基本概念 MQ全称 Message Queue&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。多用于分布式系统之间进行通信。…

nginx相关内容的安装

nginx的安装 安装依赖 yum install gcc gcc-c automake autoconf libtool make gd gd-devel libxslt-devel -y 安装lua与lua依赖 lua安装步骤如下: mkdir /www mkdir /www/server #选择你自己的目录即可,不需要跟我一致 cd /www/server tar -zxvf lua-5.4.3.tar.gz cd lua-5.4…

掌握FL Studio21的编曲功能,让你的音乐创作更上一层楼

音乐是人类最美好的语言&#xff0c;它能够跨越国界、文化和语言&#xff0c;将人们紧密地联系在一起。在当今数字化时代&#xff0c;音乐创作已经不再是专业人士的专利&#xff0c;越来越多的音乐爱好者开始尝试自己动手制作音乐。而FL Studio21中文版编曲软件正是这样一个为你…

mysql的基本知识点-操作数据库表

创建数据库&#xff1a; CREATE DATABASE database_name;创建一个名字为database_name的数据库&#xff1b; 删除数据库&#xff1a; DROP DATABASE database_name;删除名字为database_name的数据库&#xff1b; 在执行删除数据库操作前&#xff0c;请确保你确实想要删除数据…

pdf文件属性的删除

pdf文件属性的删除 投标过程中需要处理文件属性&#xff0c;特别是word文件属性以及pdf文件的处理 这里讲解pdf文件属性的处理 word处理在我的另外一个博客中&#xff0c;word文件属性的处理 https://ht666666.blog.csdn.net/article/details/134102504 一般用 adobe acroba…

数字人解决方案——ER-NeRF实时对话数字人论文解读

简介 本文提出了一种新的基于条件神经辐射场&#xff08;Condition NeRF&#xff09;的talking portrait合成框架ER-NeRF&#xff0c;能够在较小的参数量下实现高精度的实时渲染和快速收敛。该方法利用空间区域的不平等贡献来指导谈话肖像建模&#xff0c;以提高动态头部重建的…

MNN 围炉札记

文章目录 一、MNN 资料二、使用示例三、源码分析1、createFromFile、createFromBuffer1.1 Content1.2 createFromBufferInternal1.3 Net1.4 Interpreter1.5 Interpreter::Interpreter 2、createRuntime2.1 RuntimeInfo2.2 Schedule::getApprociateType2.2.1 MNNGetExtraRuntime…

《论文阅读》EmpDG:多分辨率交互式移情对话生成 COLING 2020

《论文阅读》EmpDG:多分辨率交互式移情对话生成 COLING 2020 前言简介模型架构共情生成器交互鉴别器损失函数前言 亲身阅读感受分享,细节画图解释,再也不用担心看不懂论文啦~ 无抄袭,无复制,纯手工敲击键盘~ 今天为大家带来的是《EmpDG: Multi-resolution Interactive E…

正则表达式:深入理解与应用

正则表达式&#xff0c;又称正规表示法、常规表示法&#xff08;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09;&#xff0c;是计算机科学中的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器…

Linux 文件系统:文件描述符、管理文件

目录 一、三个标注输入输出流 二、文件描述符fd 1、通过C语言管理文件—理解文件描述符fd 2、文件描述符实现原理 3、文件描述符0、1、2 4、总结 三、如何管理文件 1、打开文件的过程 2、内核空间的结构 struct task_struct&#xff08;PCB&#xff09; struct file…

你真的了解SpringBoot注解?阿里巴巴面试告诉你答案!

如有疑问或者更多的技术分享,欢迎关注我的微信公众号“知其然亦知其所以然”! 大家好,我是小米!今天我来和大家分享一下在阿里巴巴面试中常见的一个问题:SpringBoot注解。SpringBoot作为当今流行的Java开发框架,注解是其灵魂所在,熟练掌握这些注解对于应对面试非常有帮…

腾讯云服务器入站规则端口开放使用指南(CentOS系统)

第一步&#xff1a;开放安全组入站规则 来源处0.0.0.0/0是对IPv4开发&#xff0c;::/0是对IPv6开放&#xff1b; 协议端口按照提示填写即可。云服务器防火墙开放 第三步&#xff1a;本地防火墙开放 sudo firewall-cmd --zonepublic --add-port你的端口号/tcp --perma…

【c++】类和对象

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;c_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.面向过程和面向对象初步认识 面向过程&#xff08;C语言&#xff09; 面向对象&#xff08;C&#xff09; 2.类的引入和定义 2.1 类…

OpenCV图像阈值分割、二值化

在OpenCV中图像总共有5种图像二值化的方法&#xff0c; 在进行图像二值化时最重要的就是确定分割的阈值&#xff0c;阈值确定的方法主要有两类&#xff1a;全局阈值和自适应阈值。而在全局阈值和自适应阈值下面又有很多方法&#xff0c;本文将对这些方法进行详细讲解 OpenCV图…

FPGA——DDR3的IP核

FPGA——DDR3的ip核 IP核配置基于MIG核代码基于AXI接口的DDR3 IP核配置 1 2 3 4 5 6 基于MIG核代码 控制MIG核的信号进行读写 module MIG_APP_Drive(input i_ui_clk ,input i_ui_rst ,input init_calib_…

Legacy|电脑Windows系统如何迁移到新安装的硬盘?系统迁移详细教程!

前言 前面讲了很多很多关于安装系统、重装系统的教程。但唯独没有讲到电脑换了新的硬盘之后&#xff0c;怎么把旧系统迁移到新的硬盘上。 今天小白就来跟各位小伙伴详细唠唠&#xff1a; 开始之前需要把系统迁移的条件准备好&#xff0c;意思就是在WinPE系统下&#xff0c;可…