React 架構(gòu)流程概覽

啟動React項目

啟動項目，并打開 Performance 面板

流程分析

首先找到入口函數(shù)

整個 render 下面的調(diào)用棧就是首屏渲染要執(zhí)行的流程。

render 過程大致分為三部分：分別對應 調(diào)度器、協(xié)調(diào)器、渲染器：

各部分解析

調(diào)度器

第一部分：

調(diào)度器：創(chuàng)建整個應用根節(jié)點fiberRootNode和當前應用根節(jié)點 rootFiber，接下來就會進入首屏渲染。

協(xié)調(diào)器

進入首屏渲染，開始創(chuàng)建 workInProgress Fiber 樹。
創(chuàng)建 workInProgress 的流程類似于遞歸過程，分為遞階段（beginWork）和歸階段（completeWork）

整個 renderRootSync 方法的執(zhí)行就是 協(xié)調(diào)器的執(zhí)行過程

渲染器

渲染器的工作是：將變化的節(jié)點渲染到視圖上

渲染器：又稱為 commit 階段，分為三個子階段：渲染到視圖之前，渲染到視圖中，渲染到視圖后

總結(jié)

• 調(diào)度器：創(chuàng)建整個應用根節(jié)點fiberRootNode和當前應用根節(jié)點 rootFiber，接下來就會進入首屏渲染。
• 協(xié)調(diào)器 ：render 階段（遞與歸）
• 渲染器：commit 階段，分為三個階段：渲染到視圖之前，渲染到視圖中，渲染到視圖后
• 創(chuàng)建 workInProgressFiber 的流程也類比為遞歸的過程，也分為 遞階段和歸階段，遞階段就是執(zhí)行的 beginWork，歸階段就是執(zhí)行的 completeWork
• renderRootSync 函數(shù)執(zhí)行的過程就是協(xié)調(diào)器的執(zhí)行，協(xié)調(diào)器的執(zhí)行被稱為 render 階段，render 階段開始于 renderRootSync 函數(shù)（commitRoot 是渲染器需要執(zhí)行的函數(shù)）
• render 階段使用遍歷來實現(xiàn)了可中斷的遞歸，其中遞歸可以分為 遞階段和歸 階段
• render 階段不會執(zhí)行具體的 DOM 操作，具體的 DOM 操作是在 commit 階段執(zhí)行的，render 階段 要做的就是為需要的節(jié)點打上標記（deletion或者placement）
• render 階段就是 采用深度優(yōu)先遍歷的方式，依次執(zhí)行 fiber 節(jié)點的 beginwork 和 completework

PS：

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