reactdom render如何串联渲染链路量资源.pdfVIP

本文由简悦SimpRead转码，原文地址

由于ReactDOM.render的内容比较多，所以这里拆分了上中下三讲来讲解。

在上一讲，我们站在宏观角度对Fiber的架构分层和迭代动机有了充分的把握。从本讲开始，以

首次渲染为切入点，拆解Fiber架构下ReactDOM.render所触发的渲染链路，结合源码理解整个链路

中所涉及的初始化、render和commit等过程。

ReactDOM.render调用栈的逻辑分层

开篇先给到你一个简单的ReactAppDemo：

importReactfromreact;

importReactDOMfromreact-dom;

functionApp(){

return(

divclass

divclass

h1我是标题/h1

p我是第一段话/p

p我是第二段话/p

/div

/div

);

}

constrootElement=document.getElementById(root);

ReactDOM.render(App/,rootElement);

Demo启动后，渲染出的界面如下图所示：

现在请你打开Chrome的Performance面板，点击下图红色圈圈所圈住的这个“记录”按钮：

然后重新Demo页面对应的本地服务地址，待页面刷新后，终止记录，便能够得到如下图右下角

所示的这样一个调用栈大图：

放大该图，定位“src/index.js”这个文件路径，我们就可以找到ReactDOM.render方法对应的调用

栈，如下图所示：

从图中你可以看到，ReactDOM.render方法对应的调用栈非常深，中间涉及的函数量也比较大。如果

这使你心里发虚，请先不要急于撤退——分析调用栈只是我们理解渲染链路的一个，我们的目

的是借此提取关键逻辑，而非理解调用栈中的每一个方法。就这来说，你首先需要把握的，就是整

个调用链路中所包含的三个阶段：

图中scheduleUpdateOnFiber方法的作用是调度更新，在由ReactDOM.render发起的首屏渲染这个

场景下，它触发的就是performSyncWorkOnRoot。performSyncWorkOnRoot开启的正是我们反复

强调的render阶段；而commitRoot方法开启的则是真实DOM的渲染过程（commit阶段）。因此

以scheduleUpdateOnFiber和commitRoot两个方法为界，我们可以大致把ReactDOM.render的调

用栈划分为三个阶段：

1.初始化阶段

2.render阶段

3.commit阶段

接下来，我们就一起来看看这三个阶段分别做了哪些事情。

注：渲染链路串讲已被拆分为3个，本讲解的是初始化阶段。

拆解ReactDOM.render调用栈——初始化阶段

首先我们提取出初始化过程中涉及的调用栈大图：

图中的方法虽然看上去又多又杂，但做的事情清清爽爽，那就是完成Fiber树中基本实体的创建。

什么是基本实体？基本实体有哪些？问题的答案藏在源码里，这里我为你提取了源码中的关键逻辑，首

先是legacyRenderSubtreeIntoContainer方法。在ReactDOM.render函数体中，以下面代码所示的

调用了它：

returnlegacyRenderSubtreeIntoContainer(null,element,container,false,

callback);

而legacyRenderSubtreeIntoContainer的关键逻辑如下（解析在注释里）：

functionlegacyRenderSubtreeIntoContainer(parentComponent,children,container,

forceHydrate,callback){

varroot=container._reactRootContainer;

varfiberRoot