React 架构流程概览一
React 架构流程概览(一)
启动React项目
启动项目,并打开 Performance 面板
流程分析
首先找到入口函数
整个 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:
- React 版本是17版本
- 工具:控制面板的 Performance
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfhcck
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13