React@16.x(20)渲染流程-首次渲染

目录

  • 1,渲染的前置知识点
    • 1.1,React 元素
    • 1.2,React 节点
    • 1.3,节点类型
    • 1.4,真实DOM
  • 2,首次渲染
    • 2.1,根据参数创建节点
    • 2.2,不同节点,有不同处理
    • 2.3,生成虚拟DOM树
    • 2.4,将生成的真实DOM对象,加入到容器中
  • 3,部分举例说明
    • 3.1
    • 3.2
    • 3.3

1,渲染的前置知识点

渲染:将 React 元素生成特定对象,并通过这些对象生成真实 DOM 对象,加入到容器中。

1.1,React 元素

1,通过 React.createElement() 创建,JSX 是它的语法糖。

  • <div></div>
  • <App />

2,它有一个 type 属性,用于标记类型

常见类型举例:

const ele = <div></div>;
console.log(ele);

普通 DOM

在这里插入图片描述

class Child extends Component {}
console.log(<Child />);

在这里插入图片描述

函数

function Child() {}
console.log(<Child />);

在这里插入图片描述

1.2,React 节点

专门用于渲染到页面的特定对象

  • 通过React 元素创建;
  • ReactDOM 通过它来进行渲染

1.3,节点类型

下面这些都是 React 自己创建的节点类型:

  1. DOM 节点,创建该节点的 React 元素类型 是一个字符串。
  2. 组件(Composite)节点,创建该节点的 React 元素类型是一个函数或类。
  3. 文本(Text)节点,由字符串,数字创建。
  4. 空(Empty)节点,由 nullundefinedfalsetrue 创建。
  5. 数组节点,由一个数组创建。

举例:

1和2已经有例子了,不多赘述。

3,4,5说的【创建】是指通过 React 元素创建,也就是说字符串,数字,null 等也都会被创建为 React 元素,再创建 React 节点。

const ele = "text"; // 或 123, null, true 等 
console.log(<ele />);// 数组可以直接渲染
export default class App extends Component {render() {return (<>123{true}{ele}[1,2,3]</>);}
}

注意,节点类型中并不包括普通对象,所以普通对象无法渲染

1.4,真实DOM

通过 document.createElement() 创建的 DOM 元素。

2,首次渲染

ReactDOM.render(参数1, 参数2) 的过程中,React 内部会将React 元素(参数1)先转为 React 节点,再进行渲染(挂载到参数2)。

2.1,根据参数创建节点

参数指 ReactDOM.render() 的第一个参数:

ReactDOM.render(app, document.getElementById('root'));

2.2,不同节点,有不同处理

  1. 文本节点:通过 document.createTextNode() 创建真实的文本节点。
  2. 空节点:无事发生(但节点存在)。
  3. DOM节点:通过 document.createElement() 创建真实DOM对象,接着立即设置该真实DOM元素的各种属性(属性在 props 中),然后遍历对应 React 元素的 children 属性,进行递归操作(回到第1步)。
  4. 数组节点:遍历数组,对数组的元素创建节点,并进行递归操作(回到第1步)。
  5. 组件节点:
    1. 函数组件:调用该函数(函数必须返回可以生成节点的内容),将函数返回的结果进行递归操作(回到第1步)
    2. 类组件:
      1. 创建类的实例;
      2. 调用类的生命周期方法 static getDerivedStateFromProps()
      3. 调用组件的 render 方法,得到节点对象进行递归操作(回到第1步);
      4. 将组件的生命周期方法 componentDidMount() 加入到执行队列(先进先出)。当整个虚拟DOM树构建完成,并将真实DOM对象加入到容器之后,执行该队列。

结合类组件的第3步和第4步。可以得到父子组件生命周期的执行顺序:
getDerivedStateFromProps --> 父 render -->
getDerivedStateFromProps --> 子 render ->
componentDidMount() --> 父 componentDidMount()

2.3,生成虚拟DOM树

对节点处理后,会生成整个虚拟DOM树,同时节点对应的真实DOM也生成了。

React 会将虚拟DOM树保存起来,后续更新时会进行对比。

2.4,将生成的真实DOM对象,加入到容器中

ReactDOM.render() 的第2个参数就是容器,通过 appendChild() 方法将生成的真实DOM对象,加入容器中。

ReactDOM.render(app, document.getElementById('root'));

3,部分举例说明

3.1

const app = <div className="assaf"><h1>标题{["abc", null, <p>段落</p>]}</h1><p>{undefined}</p>
</div>;
ReactDOM.render(app, document.getElementById('root'));

得到的虚拟DOM树:

3.2

function Comp1(props) {return <h1>Comp1 {props.n}</h1>
}function App(props) {return (<div><Comp1 n={5} /></div>)
}const app = <App />;
ReactDOM.render(app, document.getElementById('root'));

得到的虚拟DOM树:

3.3

class Comp1 extends React.Component {render() {return (<h1>Comp1</h1>)}
}class App extends React.Component {render() {return (<div><Comp1 /></div>)}
}const app = <App />;
ReactDOM.render(app, document.getElementById('root'));

得到的虚拟DOM树:


以上。

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

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

相关文章

course-nlp——2-svd-nmf-topic-modeling

本文参考自https://github.com/fastai/course-nlp。 使用NMF and SVD进行主题建模 问题 主题建模是开始学习 NLP 的一种有趣方式。我们将使用两种流行的矩阵分解技术。考虑最极端的情况——使用两个向量的外积重建矩阵。显然&#xff0c;在大多数情况下&#xff0c;我们无法…

《微服务大揭秘:SpringBoot与SpringCloud的魔法组合》

加入我们的探险队伍&#xff0c;一起深入SpringBoot与SpringCloud构建的微服务世界。以轻松幽默的笔触&#xff0c;带你一步步揭开微服务架构的神秘面纱&#xff0c;从服务发现的智能地图Eureka&#xff0c;到API网关Zuul的城市门卫&#xff0c;每一个环节都充满了惊喜。不仅如…

2. JavaScript 语法和数据结构

1. 基础 JavaScript不区分大小写 2. 注释 // 单行注释/* 这是一个更长的&#xff0c;多行注释 *//* 然而&#xff0c;你不能&#xff0c;/* 嵌套注释 */ 语法错误 */3. 声明 var 声明一个变量&#xff0c;可选初始化一个值。 let 声明一个块作用域的局部变量&#xff0c;可…

蒸汽流量积算仪数采上云案例

蒸汽流量积算仪数采上云案例 背景需求 中晟环境项目&#xff0c;蒸汽流量积算仪数据采集上云。传统方案&#xff0c;采用人工抄表方式&#xff0c;人工成本高&#xff0c;记录繁琐&#xff0c;数据记录常常出现记录错乱、模糊的情形。根据现有需求&#xff0c;实现积算仪的数…

6.4分享会

介绍 严格意义上讲&#xff0c;我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系&#xff0c;ECMAScript 简称 ES 它提供了一套语言标准规范&#xff0c;如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大…

Wi-Fi 6E vs. Wi-Fi 7: Which is the Best Fit for Your Infrastructure?

Wi-Fi 6E vs. Wi-Fi 7: Which is the Best Fit for Your Infrastructure? With the rapid advancement of wireless technology, organizations face a critical decision: should they adopt Wi-Fi 6E now or wait for Wi-Fi 7? This decision impacts various aspects of …

短剧市场大爆炸:小米和华为的亿万争夺战,谁能笑到最后?

在数字化媒体的浪潮中&#xff0c;内容消费模式正经历着翻天覆地的变化。短视频的兴起引领了一种全新的娱乐方式&#xff0c;而短剧作为其衍生形式&#xff0c;正逐渐成为各大科技巨头争夺的新战场。 小米和华为&#xff0c;作为中国科技界的两大巨头&#xff0c;也在这一新兴…

关于焊点检测SJ-BIST)模块实现

关于焊点检测SJ-BIST)模块实现 语言 :Verilg HDL 、VHDL EDA工具:ISE、Vivado、Quartus II 关于焊点检测SJ-BIST)模块实现一、引言二、焊点检测功能的实现方法(1) 输入接口(2) 输出接口(3) 模块实现核心状态图(4) 模块实现原理图关键词: Verilog HDL,焊点检测功能…

欲除烦恼须无我,各有前因莫羡人

欲除烦恼须无我&#xff0c;各有前因莫羡人

深度学习-09-让函数更简单

深度学习-09-让函数更简单 本文是《深度学习入门2-自製框架》 的学习笔记&#xff0c;记录自己学习心得&#xff0c;以及对重点知识的理解。如果内容对你有帮助&#xff0c;请支持正版&#xff0c;去购买正版书籍&#xff0c;支持正版书籍不仅是尊重作者的辛勤劳动&#xff0c;…

leetcode455.分发饼干、376. 摆动序列、53. 最大子序和

455.分发饼干 为了满足更多的小孩&#xff0c;就不要造成饼干尺寸的浪费 大尺寸的饼干既可以满足胃口大的孩子也可以满足胃口小的孩子&#xff0c;那么就应该优先满足胃口大的 这里的局部最优就是大饼干喂给胃口大的&#xff0c;充分利用饼干尺寸喂饱一个&#xff0c;全局最…

前端面试题日常练-day54 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末 1. 在PHP中&#xff0c;以下哪个函数用于将一个字符串转换为日期时间对象&#xff1f; a) date() b) strtotime() c) datetime() d) time() 2. PHP中的超全局变量$_COOKIE用于存储什么类型的数据&a…

一致性hash算法的应用与go语言实现

一致性hash算法的应用与实现 设计目标&#xff1a;一致性hash算法的主要设计目标是在分布式系统中实现节点增减时数据映射关系的最小变动&#xff0c;从而保证数据的一致性和系统的稳定性。 一致性hash算法的应用场景 分布式负载均衡 一致性hash算法在分布式系统中得到广泛应…

揭秘AI 原生应用技术栈

一次性把“AI 原生应用技术栈”说明白 AI热潮持续&#xff0c;厂商努力推动有价值的应用涌现&#xff0c;并打造服务AI原始应用的平台产品。本文精简介绍业界最新的AI原生应用技术栈&#xff0c;让您迅速把握前沿科技脉搏。 整体架构 AI技术栈逻辑图精简呈现&#xff0c;多层…

图形学初识--透视修正

文章目录 前言正文为什么需要透视矫正&#xff1f;1、视图坐标空间--->NDC坐标空间&#xff08;透视投影&#xff09;&#xff08;1&#xff09;直线&#xff1a;&#xff08;2&#xff09;三角形&#xff1a;总结&#xff1a; 2、NDC坐标空间--->屏幕坐标空间&#xff0…

PID控制算法介绍及使用举例

PID 控制算法是一种常用的反馈控制算法&#xff0c;用于控制系统的稳定性和精度。PID 分别代表比例&#xff08;Proportional&#xff09;、积分&#xff08;Integral&#xff09;和微分&#xff08;Derivative&#xff09;&#xff0c;通过组合这三个部分来调节控制输出&#…

因子区间[牛客周赛44]

思路分析: 我们可以发现125是因子个数的极限了,所以我们可以用二维数组来维护第几个数有几个因子,然后用前缀和算出来每个区间合法个数,通过一个排列和从num里面选2个 ,c num 2 来计算即可 #include<iostream> #include<cstring> #include<string> #include…

用户反馈解决方案 —— 兔小巢构建反馈功能

目录 01: 前言 02: 用户反馈整体实现方案分析 03: 兔小巢全解析 04: 基于兔小巢实现用户反馈 05: 总结 01: 前言 在前台系统中&#xff0c;用户反馈 功能也是一个非常常见的需求。 通过反馈功能&#xff0c;我们可以知道当前的应用存在的一些不足和用户相应的一些诉求。…

【Linux系统】进程信号

本篇博客整理了进程信号从产生到处理的过程细节&#xff0c;通过不同过程中的系统调用和其背后的原理&#xff0c;旨在让读者更深入地理解操作系统的设计与软硬件管理手段。 目录 一、信号是什么 1.以生活为鉴 2.默认动作与自定义动作 3.信号的分类、保存、产生 二、产生…

蓝桥杯物联网竞赛_STM32L071KBU6_解决脉冲输出频率数值不稳定BUG

问题&#xff1a; 在用脉冲进行做题的时候发现脉冲输出的频率随着脉冲数值增大而越来越不稳定 典型的情况是10000HZ的时候会变成0HZ或者infHZ也就是无穷大 代码&#xff1a; int BEIGNNUMBER 0; int ENDNUMBER 0; unsigned char STATETIM 0; void HAL_TIM_IC_CaptureCal…