React 渲染流程分析

React 页面是由组件组成的,从根组件直到叶组件,内部的组件数通过 Fiber 来保存并触发并发更新。页面的展示分为两部分,首先是初始化,所有组件首次展示,都要进行渲染,之后是更新流程,也就是页面产生了交互,需要某些组件出现状态变更,React 内部找到需要更新的组件并进行更新。本文从源代码的角度,对 React 的初始化以及更新过程进行梳理:

JSX编译

JSX 是一种 HTML 代码模板,JavaScript 引擎原生并不支持 JSX 语法,因此,运行时需要首先将 JSX 转为浏览器可以执行的 JS 代码。React 通过 Babel 插件 plugin-transform-react-jsx 将 JSX 装换为 JS,下图中 Bundle.js 中包含最终转换好的 JS。
在这里插入图片描述

createRoot

首先,绑定 Root 容器到 Dom 节点,所有 Root 下的组件全部展示在 Dom 节点下。createRoot -> createContainer -> createFiberRoot,最终返回的是 FiberRoot
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

render

firerNode 创建完成之后,调用 root.render,是整个App 渲染的入口。
在这里插入图片描述
updateContainer 中有 Lane 的概念,Lane 和优先级有关系,以后具体再看起什么作用
在这里插入图片描述
进入 scheduleFiber,调度 Fiber 任务
在这里插入图片描述
进入 performConcurrentWorkOnRoot,并发执行任务
在这里插入图片描述
进入 renderRootSync,同步渲染 Root
在这里插入图片描述
进入 workLoopSync,循环处理任务
在这里插入图片描述
进入 performUnitOfWork, 开始处理任务
在这里插入图片描述

进入 beginWork,渲染开始
在这里插入图片描述
开始创建 FiberNode
在这里插入图片描述
进入reconcileChildren,进行对比
在这里插入图片描述
进入处理单个节点逻辑
在这里插入图片描述
进入创建 Fiber 方法
在这里插入图片描述
通过上面的步骤,FiberTree创建完成。下面进入 Commit 阶段,回到performConcurrentWorkOnRoot,进入 finishConcurrentRender:
在这里插入图片描述
最终进入 commitMutationEffects,找到需要修改的节点
在这里插入图片描述
进入commitMutationEffectsOnFiber
在这里插入图片描述
递归处理所有子节点
在这里插入图片描述
处理最终渲染
在这里插入图片描述
Dom 节点操作
在这里插入图片描述

总结

React 渲染流程代码比较多,入口在 Root.render,并发执行 Render,同步执行 Commit。

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

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

相关文章

【利用python制作一个小程序生成爱心】

要利用Python制作一个小程序来生成爱心,我们可以使用字符图形或者利用图形库(如turtle)来绘制。下面我将分别展示这两种方法。 方法一:字符图形爱心 这种方法使用ASCII字符来模拟爱心的形状。 def print_love():heart [ ♥ …

实况:老菜鸟自力更生从零开始重学spring目标是画出一张唬人大图(二、源码下载编译)

前情提要:调试前的基础知识梳理 速览 “Spring”包含哪些东西源码下载源码编译1、编译工具选择:gradle2、使用gradle编译spring并导入idea预编译spring-oxm导入IDEA确认合适的jdk版本排除spring-aspects模块 开始调试 “Spring”包含哪些东西 可以明确的…

代码随想录算法训练营第二十四天| (回溯) 77. 组合、 216.组合总和III、17.电话号码的字母组合

77. 组合 题目链接:77. 组合 文档讲解:代码随想录 状态:很多细节忘了 思路:先画图,然后可以发现,从1到n中选择k个数,可以看成是一个递归过程,这个递归的深度就是k。然后遍历当前这层…

四舍五入 和 交换变量值 题目

题目 JAVA3 四舍五入分析:代码: JAVA4 交换变量值分析:代码:大佬代码: JAVA3 四舍五入 描述 定义一个int类型变量i,i为由浮点数变量d四舍五入后的整数类型,请将转换后的i进行输出。 输入描述:…

Centos7安装jdk8或11以及切换方案

目录 jdk安装 安装OpenJDK11 安装OpenJDK8 配置默认的 Java 版本 验证 全局环境变量(选配) 个人版(自己可以用,公司不建议) 公司版本 /etc/profile 和 ~/.bash_profile 区别 前言-与正文无关 生活远不止眼前的苦…

【动态规划】| 路径问题之不同路径 力扣62

🎗️ 主页:小夜时雨 🎗️ 专栏:动态规划 🎗️ 如何活着,是我找寻的方向 目录 1. 题目解析2. 代码 1. 题目解析 题目链接: https://leetcode.cn/problems/unique-paths/description/ 通常动态规划的题目有…

建筑电工精选最新模拟试题(含答案)

一、填空题 1、我国安全生产的基本方针是 安全 第一,预防 为主,综合治理。 2、特种作业人员,必须积极主动参加培训与考核 。既是法律法规的规定,也是自身工作,生产及生命安全 的需要 3、触电急救&#x…

如何在React组件中实现父子组件之间的通信?

在React中,父子组件之间的通信通常通过props(属性)和回调函数来实现。以下是具体的实现方式: 父组件向子组件传递数据(通过props) 在父组件中,你可以通过向子组件传递props来发送数据。子组件…

【Tkinter界面】Canvas 图形绘制(03/5)

文章目录 一、说明二、画布和画布对象2.1 画布坐标系2.2 鼠标点中画布位置2.3 画布对象显示的顺序2.4 指定画布对象 三、你应该知道的画布对象操作3.1 什么是Tag3.2 操作Tag的函数 https://www.cnblogs.com/rainbow-tan/p/14852553.html 一、说明 Canvas(画布&…

双指针练习:和为s的两个数字

题目链接:剑指offer 57.和为s的两个数字 题目描述: 购物车内的商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况,返回任一结果即可。 示例 1: 输入:price [3, 9…

【Windows】配置Flutter开发环境

一、下载 flutter sdk 点此跳至下载官网 下载好flutter sdk,并解压到自定义的位置。 二、配置环境变量 此电脑 --> 右键 选择 属性 --> 点击 高级系统设置 --> 会弹出系统属性的窗口,点击 环境变量 按钮 1.配置加速镜像地址 PUB_HOSTED_…

Web前端设计毕业论文:深度探索与未来展望

Web前端设计毕业论文:深度探索与未来展望 在数字化时代,Web前端设计作为互联网应用的重要组成部分,其重要性和复杂性日益凸显。本论文旨在深度探索Web前端设计的关键要素、发展趋势以及面临的挑战,为未来的研究和实践提供有价值的…

【python】python指南(四):typing静态类型注解综述

一、引言 对于算法工程师来说,语言从来都不是关键,关键是快速学习以及解决问题的能力。大学的时候参加ACM/ICPC一直使用的是C语言,实习的时候做一个算法策略后台用的是php,毕业后做策略算法开发,因为要用spark&#x…

大话C语言:第24篇 预处理

1 C语言编译流程 C语言的编译流程包括: 预编译:将.c 中的头文件展开、宏展开,生成的文件是.i 文件。gcc指令:gcc -E file.c -o file.i 编译:将预处理之后的.i 文件生成 .s 汇编文件。gcc指令:gcc -S file…

Java课设项目

项目简介:射击生存类小游戏 项目采用技术: 游戏引擎: Unity 编程语言: Java 图形处理: NVIDIA PhysX (物理引擎), HDRP (High Definition Render Pipeline) 音效与音乐: FMOD, Wwise 版本控制: Git 功能需求分析: 角色控制:玩家能够使用键盘和鼠标控制角色移动、…

AI影像时代来临,联发科天玑以专业无畏精神重新定义手机专业影像

近期,联发科与Discovery探索频道联合举办了一场以“越极境,见芯境”为主题的天玑影像展,活动地点位于我国桂林阳朔。活动现场展示了阳朔壮美山水的画卷,以及救援队员在岩壁上进行训练的极限瞬间。令人意想不到的是,这些…

【课程系列01】某乎的AI大模型全栈工程师-第4期

网盘链接 链接:https://pan.baidu.com/s/1QLkRW_DmIm1q9XvNiOGwtQ --来自百度网盘超级会员v6的分享 课程目标 AI大模型全栈工程师是指具备人工智能领域全方位能力的工程师,特别是在大模型开发和应用方面具有深厚的专业知识和技能。以下是关于AI大模型…

第12章.STM32标准库简介

目录 0. 《STM32单片机自学教程》专栏 12.1 CMSIS 标准 12.2 STM32标准库文件结构 12.2.1 主结构 12.2.2 Libraries固件库文件 CMSIS文件夹 1.core_cm3.c&core_cm3.h 2.startup启动文件 3.Stm32f10x.h 4.system_stm32f10x.c&system_stm32f10…

Linux常用命令及或g++(或gcc)编辑器运用

一. 实验内容 1.打开VMware Workstation虚拟机进入Ubuntu系统,打开终端。 练习使用常用的Linux命令,主要包括如下命令: mkdir, rmdir, cd, pwd, ls, clear, cat, rm等。(其中,cat、rm命令请在下面实验内容3…

IIC通信总线

文章目录 1. IIC总线协议1. IIC简介2. IIC时序1. 数据有效性2. 起始信号和终止信号3. 数据格式4. 应答和非应答信号5. 时钟同步6. 写数据和读数据 2. AT24C023. AT24C02读写时序4. AT24C02配置步骤5. 代码部分1. IIC基本信号2. AT24C02驱动代码3. 实验结果分析 1. IIC总线协议 …