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：

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