网站设计内容包括,wordpress feed 缩略图,商城网站开发嵌入支付宝,阳江网红打卡点React 架构流程概览 文章目录React 架构流程概览启动React项目流程分析各部分解析调度器协调器渲染器总结启动React项目
启动项目#xff0c;并打开 Performance 面板 流程分析
首先找到入口函数 整个 render 下面的调用栈就是首屏渲染要执行的流程。
render 过程大致分为…React 架构流程概览 文章目录React 架构流程概览启动React项目流程分析各部分解析调度器协调器渲染器总结启动React项目
启动项目并打开 Performance 面板 流程分析
首先找到入口函数 整个 render 下面的调用栈就是首屏渲染要执行的流程。
render 过程大致分为三部分分别对应 调度器、协调器、渲染器
各部分解析
调度器
第一部分 调度器创建整个应用根节点fiberRootNode和当前应用根节点 rootFiber接下来就会进入首屏渲染。 协调器
进入首屏渲染开始创建 workInProgress Fiber 树。 创建 workInProgress 的流程类似于递归过程分为递阶段beginWork和归阶段completeWork
整个 renderRootSync 方法的执行就是 协调器的执行过程 渲染器
渲染器的工作是将变化的节点渲染到视图上
渲染器又称为 commit 阶段分为三个子阶段渲染到视图之前渲染到视图中渲染到视图后 总结
调度器创建整个应用根节点fiberRootNode和当前应用根节点 rootFiber接下来就会进入首屏渲染。协调器 render 阶段递与归渲染器commit 阶段分为三个阶段渲染到视图之前渲染到视图中渲染到视图后创建 workInProgressFiber 的流程也类比为递归的过程也分为 递阶段和归阶段递阶段就是执行的 beginWork归阶段就是执行的 completeWorkrenderRootSync 函数执行的过程就是协调器的执行协调器的执行被称为 render 阶段render 阶段开始于 renderRootSync 函数commitRoot 是渲染器需要执行的函数render 阶段使用遍历来实现了可中断的递归其中递归可以分为 递阶段和归 阶段render 阶段不会执行具体的 DOM 操作具体的 DOM 操作是在 commit 阶段执行的render 阶段 要做的就是为需要的节点打上标记deletion或者placementrender 阶段就是 采用深度优先遍历的方式依次执行 fiber 节点的 beginwork 和 completework PS
React 版本是17版本工具控制面板的 Performance
