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

一、原理

首先,render函数在react中有两种形式:

在类组件中,指的是render方法:

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

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

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

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

return (<div className='cn'><Header> hello </Header><div> start </div>Right Reserve</div>
)

babel编译后:

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

从名字上来看,createElement方法用来元素的

react中,这个元素就是虚拟DOM树的节点,接收三个参数:

  • type:标签

  • attributes:标签属性,若无则为null

  • children:标签的子节点

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

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

二、触发时机

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

三、总结

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

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

组件的 props 改变了,不一定触发 render 函数的执行,但是如果 props 的值来自于父组件或者祖先组件的 state

在这种情况下,父组件或者祖先组件的 state 发生了改变,就会导致子组件的重新渲染

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

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

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

相关文章

python程序结束后,浏览器程序结束后仍然保持打开状态

python中使用selenium框架&#xff0c;程序执行完后&#xff0c;让浏览器保持打开的状态 from selenium import webdriver from selenium.webdriver.chrome.options import Options # 创建Chrome选项对象 chrom_options Options() # 添加实验性选项&#xff0c;使浏览器…

uniapp开发DAPP钱包应用(一) 环境搭建 Vue+ MetaMask + ABI.json

上几节我们讲了如何通过Java后端完成链上交易、信息查询、以及如何使用web3插件实现开发自测。 这一节&#xff0c;我们来说说前端DAPP的开发实现。 1. MeteMask &#x1fa9c;Java对接&#xff08;BSC&#xff09;币安链 | BNB与BEP20的开发实践&#xff08;三&#xff09;水…

Vue3全家桶 - VueRouter - 【6】导航守卫

导航守卫 查看以下情形&#xff1a; 点击主页链接时&#xff0c;默认情况下可直接进入指定页面&#xff0c;如下图&#xff0c;但是问题是该跳转的界面是需要用户登录后方可访问的&#xff1b; 可设置导航守卫来检测用户是否登录&#xff0c;如果已登录&#xff0c;则进入后台…

华为OD机试 - 模拟数据序列化传输(Java JS Python C C++)

题目描述 模拟一套简化的序列化传输方式,请实现下面的数据编码与解码过程 编码前数据格式为 [位置,类型,值],多个数据的时候用逗号分隔,位置仅支持数字,不考虑重复等场景;类型仅支持:Integer / String / Compose(Compose的数据类型表示该存储的数据也需要编码)编码后数…

四元数(Quaternion)的一些性质

四元数(Quaternion)是用于三维旋转和定向的四部分组成的超复数&#xff0c;超复数简单理解就是比abi这样的复数更复杂的复数&#xff0c;其中abi这样的复数我们也可以叫做二元数&#xff0c;表示复平面的一点&#xff0c;对于熟悉欧拉公式的朋友就知道&#xff0c;也可以看成是…

Sui与数据平台ZettaBlock达成合作,为其公测提供数据

Sui一向以闪电般的速度、无限水平扩展著称&#xff0c;现已迅速成为DeFi活动的重要场所。近期&#xff0c;数据平台ZettaBlock宣布在其开创性的Web3数据平台发布中&#xff0c;选择Sui作为基础集成合作伙伴之一。在ZettaBlock的开放测试版发布之际&#xff0c;构建者和开发者将…

双指针算法练习

27. 移除元素 题目 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑…

Springboot @Transactional大事务处理的几点建议

1.大事务&#xff1a; 总体任务对应的事务运行时间比较长&#xff0c;长时间未提交的事务。 2.大事务的危害&#xff1a; a.并发情况下&#xff0c;数据库连接池资源占满。大事务提交不及时&#xff0c;导致连接资源释放缓慢。 b.数据库死锁和锁等待。mysql innodb存储引擎背…

JS 事件捕获、事件冒泡、事件委托

js事件机制在开发中可以说时刻使用&#xff0c;例如dom绑定事件、监听其自身事件等。js事件机制有事件捕获、事件冒泡俩种机制&#xff0c;我们分别说下这俩种机制的使用场景。 一、概念 事件捕获顺序如下&#xff1a; window > document > body > div 事件冒泡顺序…

Using WebView from more than one process

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 未经允许不得转载 目录 一、导读二、概览三、问题过程源码追踪…

【C++进阶】C++继承概念详解

C继承详解 一&#xff0c;继承的概念和定义1.1 继承的概念1.2 继承的定义1.3 继承关系和访问限定符 二&#xff0c;基类和派生类的对象赋值转移三&#xff0c;继承的作用域四&#xff0c;派生类的默认成员函数五&#xff0c;继承和友元&静态成员和继承六&#xff0c;菱形继…

vue 在线预览word

1 mammoth 先找的是mammoth这个插件yarn add mammoth,版本是1,7.0 参考网上的示例使用如下&#xff1a; import mammoth from "mammoth"; const vHtml ref("") const readExcelFromRemoteFile (url) >{var xhr new XMLHttpRequest();xhr.open("…

前端面试练习24.3.12

目录 flex 布局如何使用 说出 space-between 和 space-around 的区别 介绍下粘性布局&#xff08;sticky&#xff09; 特点&#xff1a; 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。 结构&#xff1a; 继承&#xff1a; 性能&#xff1a;…

ARM/Linux嵌入式面经(四):浙江大华

大华一面 嵌入式 主要是问的项目相关 标准的十五分钟 电话面 这个面试官主要问项目,我同门面的全问八股,可能面试官不一样吧 文章目录 UART串口通信的波特率,常用波特率有哪些串口通信校验方式是什么,有什么区别方便简单的奇偶校验偶校验(even parity)累加和校验CRC循环冗…

柚见第十一期(前端页面开发)

创建队伍 便于控制样式,在外面套一层div 创建假数据模拟后端传来数据 //假数据模拟 const initFormData { "name": "", "description": "", "expireTime": "", "maxNum": 0, "passwor…

未来艺术展览新趋势——3D线上画展如何创新展示?

一、艺术展示的数字化转型 随着科技的不断进步&#xff0c;3D线上画展作为艺术展示的新趋势&#xff0c;正逐渐改变着人们欣赏和购买艺术作品的方式。对于画家而言&#xff0c;3D线上画展不仅提供了一个全新的平台来展示他们的作品&#xff0c;还开辟了销售渠道&#xff0c;扩大…

天梯赛的赛场安排(Python)

作者 陈越 单位 浙江大学 天梯赛使用 OMS 监考系统&#xff0c;需要将参赛队员安排到系统中的虚拟赛场里&#xff0c;并为每个赛场分配一位监考老师。每位监考老师需要联系自己赛场内队员对应的教练们&#xff0c;以便发放比赛账号。为了尽可能减少教练和监考的沟通负担&#…

js中有哪些数据类型,它们有什么区别?

JavaScript共有八种数据类型&#xff0c;分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。 一、Symbol 和 BigInt 是ES6 中新增的数据类型&#xff1a; 1&#xff0c;Symbol 代表创建后独一无二且不可变的数据类型&#xff0c;它主要是为了解决可…

可视化表单流程编辑器为啥好用?

想要提升办公率、提高数据资源的利用率&#xff0c;可以采用可视化表单流程编辑器的优势特点&#xff0c;实现心中愿望。伴随着社会的进步和发展&#xff0c;提质增效的办公效果一直都是很多职场办公团队的发展需求&#xff0c;作为低代码技术平台服务商&#xff0c;流辰信息团…

【CSP试题回顾】201709-2-公共钥匙盒

CSP-201709-2-公共钥匙盒 关键点 1. 选择恰当的数据结构存储钥匙的存取操作 结构体MyKey包含三个字段&#xff1a;time、opt和index。 time字段表示操作发生的时间点。对于取钥匙的操作&#xff0c;这个时间就是老师上课的开始时间&#xff1b;对于还钥匙的操作&#xff0c…