React 架构流程概览
创始人
2024-06-02 00:04:58
0

React 架构流程概览

文章目录

    • React 架构流程概览
      • 启动React项目
      • 流程分析
        • 各部分解析
          • 调度器
          • 协调器
          • 渲染器
      • 总结


启动React项目

启动项目,并打开 Performance 面板


流程分析

首先找到入口函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gs4llhlI-1678591505665)(/Users/abby/Library/Application Support/typora-user-images/image-20230312102802774.png)]
整个 render 下面的调用栈就是首屏渲染要执行的流程。

render 过程大致分为三部分:分别对应 调度器、协调器、渲染器:
在这里插入图片描述

各部分解析

调度器

第一部分:
在这里插入图片描述
调度器:创建整个应用根节点fiberRootNode和当前应用根节点 rootFiber,接下来就会进入首屏渲染。


协调器

进入首屏渲染,开始创建 workInProgress Fiber 树。
创建 workInProgress 的流程类似于递归过程,分为递阶段(beginWork)和归阶段(completeWork)
在这里插入图片描述

整个 renderRootSync 方法的执行就是 协调器的执行过程


渲染器

渲染器的工作是:将变化的节点渲染到视图上

渲染器:又称为 commit 阶段,分为三个子阶段:渲染到视图之前,渲染到视图中,渲染到视图后
在这里插入图片描述


总结

  • 调度器:创建整个应用根节点fiberRootNode和当前应用根节点 rootFiber,接下来就会进入首屏渲染。
  • 协调器 :render 阶段(递与归)
  • 渲染器:commit 阶段,分为三个阶段:渲染到视图之前,渲染到视图中,渲染到视图后
  • 创建 workInProgressFiber 的流程也类比为递归的过程,也分为 递阶段和归阶段,递阶段就是执行的 beginWork,归阶段就是执行的 completeWork
  • renderRootSync 函数执行的过程就是协调器的执行,协调器的执行被称为 render 阶段,render 阶段开始于 renderRootSync 函数(commitRoot 是渲染器需要执行的函数)
  • render 阶段使用遍历来实现了可中断的递归,其中递归可以分为 递阶段和归 阶段
  • render 阶段不会执行具体的 DOM 操作,具体的 DOM 操作是在 commit 阶段执行的,render 阶段 要做的就是为需要的节点打上标记(deletion或者placement)
  • render 阶段就是 采用深度优先遍历的方式,依次执行 fiber 节点的 beginwork 和 completework

PS:

  1. React 版本是17版本
  2. 工具:控制面板的 Performance

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语,以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...