react渲染流程是怎样的

整体流程:
在这里插入图片描述
react的核心可以用ui=fn(state)来表示,更详细可以用:

const state = reconcile(update);
const UI = commit(state);

上面的fn可以分为如下一个部分:

  • Scheduler(调度器): 调度任务,排序优先级,让优先级高的任务先进行reconcile
  • Reconciler(协调器): 生成Fiber对象,找出哪些节点发生了改变,并打上不同的Flags(旧版本 react叫Tag),著名的diff算法也是在这个阶段中执行的;
  • Renderer(渲染器): 将Reconciler中打好标签的节点渲染到视图上

调度器

在react16之前,采用的是stack架构,所有任务只能同步进行,无法被打断,导致浏览器出现丢帧情况,表现出卡顿,react为了解决这个问题,从16之后进行了两大更新:

  • 引入Fiber
  • 新增了Scheduler
    Scheduler在浏览器原生API中实际是有类似API的,reqestIleCallback虽然每一帧的绘制时间约为16.66ms,但是若屏幕没有刷新,那么浏览器会安排长度为50ms左右的空闲时间。
    为什么是50ms?
    据研究,100ms以内用户感觉都是瞬时发生的,不会感受到延迟感,因此将空闲时间设置为50,浏览器仍然还剩余50ms。
    后期react打算重新开发这个Scheduler,这意味这调度器不仅仅是在react中使用,凡是有任务调度的项目都可以使用Scheduler。

协调器

协调器是render阶段的第二个阶段,类组件或者函数组件本身就是在这个阶段被调用的。
根据Scheduler调度结果的不同,协调器起点可能是不同的;
performSyncWorkOnRoot(同步更新流程)
会执行workLoopSync这个方法
performConcurrentWorkOnRoot(并发更新流程)

function workLoopSync (){while(workProgress != null){performUnitOfWork(workProgress)
}
}
function workLoopConcurrentSync (){while(workProgress != null && shouldYield()){performConcurrentWorkOnRoot(workProgress)}
}

新的架构使用Fiber对象来描述dom结构,最终需要形成一棵Fiber tree,不过这棵Fiber树是通过链表形式串联在一起的。
workInProgress代表的是当前的FiberNode

performUnitOfWork方法创建下一个FiberNode,并且还会将已经创建的FiberNode连接起来(child、return、sibling),从而形成一棵链表结构的Fiber tree。
若workInProgress为空,则表示没有下一个FiberNode,也就说整颗Fiber Tree已经构建完毕。

上面两个方法的区别是是否调用了shouldYield方法,该方法表明了是否可以中断。

performUnitOfWork在创建下一个FiberNode 时候,整体分为以下两大块:

  • 递阶段
  • 归阶段

递阶段
从HostRootFiber开始按照深度优先(先找到最底层)原则进行遍历,遍历到的每一个FiberNode执行beginWork方法,该方法会根据传入的FiberNode创建下一级的FiberNode,此时可能存在两种情况:

  • 下一级只有一个元素,beginWork方法会创建对应的FiberNode,并且与workInProgress连接
  • 下一级有多个元素,beginWork方法会依次创建所有的子FiberNode并且通过与subling连接到一起,每个FiberNode也会和workInProgress连接。
<ul>
<li></li>
<li></li>
<li></li>
</ul>

此时会创建3个li对应的FiberNode,连接情况如下:

所有的子Fiber依次连接

Li0Fiber.sibling = Li1Fiber
Li1Fiber.sibling = Li2Fiber
子Fiber还要和父Fiber连接
Li0Fiber.return = UlFiber
Li1Fiber.return = UlFiber
Li2Fiber.return = UlFiber

由于采用的是深度优先原则,因此无法再往下走的时候,会走入归阶段。

归阶段

归阶段会调用completeWork方法来处理FiberNode,做副作用的收集。
当某个FiberNode执行完了completeWork,若存在兄弟元素,就会进入到兄弟元素的递阶段,若不存在兄弟元素,就会进入父FiberNode的归阶段。

我们来看一张图:
在这里插入图片描述

渲染器

Renderer工作阶段称为commit阶段,该阶段会将各种副作用commit到宿主环境的UI中。
相较于之前的render阶段可以被打断,commit阶段一旦开始就会同步执行直到完成渲染工作。

整个渲染过程可以分为三个子阶段:
beforeMutation
Mutation
Layout

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

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

相关文章

【教程】Kotlin语言学习笔记(二)——数据类型(持续更新)

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【Kotlin语言学习】系列文章 第一章 《认识Kotlin》 第二章 《数据类型》 文章目录 【Kotlin语言学习】系列文章一、基本数据…

深入理解STM32中的DMA:工作原理和配置方法

DMA&#xff08;Direct Memory Access&#xff09;是STM32微控制器中的一种重要外设&#xff0c;可以实现高效的数据传输&#xff0c;减轻CPU的负担。DMA的工作原理是通过独立的通道将数据从外设直接传输到内存&#xff0c;或者从内存传输到外设&#xff0c;而无需CPU的干预。本…

Python算法题集_二叉树的中序遍历

Python算法题集_二叉树的中序遍历 题94&#xff1a;1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【直接递归】2) 改进版一【函数递归】3) 改进版二【迭代遍历】 4. 最优算法 本文为Python算法题集之一的代码示例 题94&#xff1a; 1. 示例说…

【使用IDEA总结】01——新增作者信息、方法参数返回值

[TOC](目录) 1.类新增作者信息 打开IDEA的Settings&#xff0c;Editor->Code Style->File and Code Templates->Includes->File Header&#xff0c;输入以下作者信息&#xff0c;作者名更换为自己的即可&#xff0c;操作如下图所示 /*** Author Linhaipeng* Date…

MySQL 基础知识(三)之数据库操作

目录 1 显示当前时间、用户名、数据库版本 2 查看已有数据库 3 创建数据库 4 使用数据库 5 查看当前使用的数据库 6 查看当前数据库信息 7 查看数据库编码 8 修改数据库信息 9 删除数据库 10 查看最大连接数 11 查看数据库当前连接数&#xff0c;并发数 12 查看数据…

C++类和对象-C++对象模型和this指针->成员变量和成员函数分开存储、this指针概念、空指针访问成员函数、const修饰成员函数

#include<iostream> using namespace std; //成员变量 和 成员函数 分开储存的 class Person { public: Person() { mA 0; } //非静态成员变量占对象空间 int mA; //静态成员变量不占对象空间 static int mB; //函数也不占对象空间…

在STM32微控制器中实现高速数据传输的DMA技巧

实现高速数据传输是嵌入式系统中的一个重要挑战&#xff0c;特别是在STM32微控制器这样的资源有限的环境中。为了实现高速数据传输&#xff0c;使用DMA&#xff08;直接内存访问&#xff09;是一个常见的技巧。DMA允许外设直接和内存进行数据传输&#xff0c;而无需CPU的干预&a…

抽象的前端

问题背景&#xff1a;vue3&#xff0c;axios 直接导致问题&#xff1a;路由渲染失败 问题报错&#xff1a;Uncaught SyntaxError: The requested module /node_modules/.vite/deps/axios.js?v7bee3286 does not provide an export named post (at LoginIn.vue:16:9) 引入组…

C++ //练习 7.3 修改7.1.1节(第229页)的交易处理程序,令其使用这些成员。

C Primer&#xff08;第5版&#xff09; 练习 7.3 练习 7.3 修改7.1.1节&#xff08;第229页&#xff09;的交易处理程序&#xff0c;令其使用这些成员。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /********************…

淘宝项目实战相关知识点

淘宝各个方面的布局大部分都是常规操作&#xff0c;在这里我就简单记录一下练习过程中的相关知识点&#xff0c;比较简短。相关知识点如下&#xff1a; 行高的取值 假设font-size为16px line-height:normal; line-height:1.5;24px&#xff0c;先继承后计算 line-height:200%;3…

Java并发基础:Exchanger全面解析!

内容概要 Exchanger类的优点在于能够简洁高效地实现两个线程间的数据交换&#xff0c;通过Exchanger&#xff0c;开发者可以避免复杂的锁和同步机制&#xff0c;降低并发编程的难度&#xff0c;同时&#xff0c;它还提供了线程安全的数据交换保障&#xff0c;使得多线程协作更…

替换ubuntu linux kernel内核, 实际操作有效

实验步骤(在root权限下进行) 1.内核编译前的准备工作 2.下载内核 4. 编译新内核 5. 内核安装 6. 安装模块 7. 生成initrd.img文件 8. 切换到/boot/grub/目录下,自动查找新内核,并添加至grub引导 9. 重启Ubantu,在previous version中选择启动新编译的内核 实验环境 VMwa…

android 控制台输出 缺失

问题 android 控制台输出内容缺失 详细问题 笔者进行android开发&#xff0c;期望控制台打印Log日志或是输出内容 Log.i("tag","content");或 System.out.println("content")但是实际上&#xff0c;上述内容并没有按照笔者期望打印 解决方…

2024 年 7 款最佳电脑录屏软件 [免费和付费]

录屏是捕获桌面上活动的软件应用程序。用户可以根据自己的要求创建视频记录。免费屏幕录像机广泛用于演示、演示、教程、游戏等。 录音机还有助于内容创建、远程协作和员工培训。这些录音机具有多种特性和功能。它提供了音频录制、网络摄像头集成和快速编辑工具的选项。您可以根…

跟廖雪峰老师学习Git(持续更新)

Git简介 创建版本库 第一步&#xff0c;创建一个新目录 第二步&#xff0c;通过git init变成Git可以管理的仓库 把文件添加到文本库&#xff0c;不要使用Windows自带的记事本&#xff01; 我用的是VS code 创建readme.txt 放入库中 commit可以一次提交很多文件&#xff0…

点云旋转处理

实现代码为&#xff1a; //以中心化点进行旋转double theta atan(maindirection.a);//计算的是弧度单位for (int i 0; i < origipts.size(); i){pcl::PointXYZ tempone;tempone.x aftercenerlizepts[i].x*cos(theta) aftercenerlizepts[i].y*sin(theta) center.x;temp…

代码随想录二刷——二叉树day18

文章目录 前言二叉树知识点二叉树的存储方式 一、513. 找树左下角的值二、112. 路径总和三、106. 从中序与后序遍历序列构造二叉树总结 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划二刷完卡子哥的刷题计划&#xff0c;加油&#xff01; 二刷决定精刷了…

专业140+总分420+东北大学841通信专业基础考研经验东大电子信息与通信工程,真题,大纲,参考书。

今年考研顺利上岸&#xff0c;被东北大学通信工程录取&#xff0c;其中专业课841通信专业基础140&#xff0c;数二140&#xff0c;总分420&#xff0c;整体每门课都还是比较均衡&#xff0c;刚开始考研前也和大家一样&#xff0c;焦虑&#xff0c;紧张&#xff0c;面对考研怕失…

Web课程学习笔记--CSS-Sprite的应用

雪碧图CSS Sprite的应用 CSS雪碧&#xff0c;即CSS Sprite&#xff0c;也有人叫它CSS精灵&#xff0c;是一种CSS图像合并技术&#xff0c;该方法是将小图标和背景图像合并到一张图片上&#xff0c;然后利用css的背景定位来显示需要显示的图片部分。例如常见的商品分类导航其实所…

阿里云游戏服务器一年费用多少?

阿里云游戏服务器租用价格表&#xff1a;4核16G服务器26元1个月、146元半年&#xff0c;游戏专业服务器8核32G配置90元一个月、271元3个月&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云游戏专用服务器详细配置和精准报价&#xff1a; 阿里云游戏服务器租用价格表 阿…