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
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>