React首次渲染解析二（純DOM元素）

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:29:41

React首次渲染解析二（純DOM元素）

React首次渲染解析二（純DOM元素）:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于React首次渲染解析二（純DOM元素），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。上一篇文章中，介紹了頂層對象ReactCompositeComponent[T]是如何構(gòu)造的，接下來我們看看 batchedMountCom

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀React首次渲染解析二（純DOM元素）:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于React首次渲染解析二（純DOM元素），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。上一篇文章中，介紹了頂層對象ReactCompositeComponent[T]是如何構(gòu)造的，接下來我們看看 batchedMountCom

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于React首次渲染解析二（純DOM元素），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

上一篇文章中，介紹了頂層對象ReactCompositeComponent[T]是如何構(gòu)造的，接下來我們看看 batchedMountComponentIntoNode 做了什么事情。

本文將要講解的調(diào)用棧是下面這個樣子的：

|=ReactMount.render(nextElement, container, callback) ___
|=ReactMount._renderSubtreeIntoContainer() |
 |-ReactMount._renderNewRootComponent() |
 |-instantiateReactComponent() |
 |~batchedMountComponentIntoNode() upper half
 |~mountComponentIntoNode() (平臺無關(guān))
 |-ReactReconciler.mountComponent() |
 |-ReactCompositeComponent.mountComponent() |
 |-ReactCompositeComponent.performInitialMount() |
 |-instantiateReactComponent() _|_
 |-ReactDOMComponent.mountComponent() lower half
 |-_mountImageIntoNode() (HTML DOM 相關(guān))
 _|_

如果看源碼，我們會留意到很多transaction相關(guān)的代碼，我們暫時先將其忽略，會在后續(xù)的文章中進行講解。暫時可以理解為調(diào)用transaction.perform時，實際上就是對第一個參數(shù)進行函數(shù)調(diào)用。跳過一些模版代碼后，實際上做事情的是 mountComponentIntoNode 這個方法。

// 文件位置：src/renderers/dom/client/ReactMount.js

function mountComponentIntoNode(
 wrapperInstance, // ReactCompositeComponent[T]
 container, // document.getElementById("root")
 transaction,
 shouldReuseMarkup,
 context
) {
 ...
 
 var markup = ReactReconciler.mountComponent(
 wrapperInstance,
 transaction,
 null,
 ReactDOMContainerInfo(wrapperInstance, container),
 context,
 0 /* parentDebugID */
 );

 ...
 
 ReactMount._mountImageIntoNode(
 markup,
 container,
 wrapperInstance,
 shouldReuseMarkup,
 transaction
 );
}

ReactReconciler.mountComponent 用于創(chuàng)建 DOM 元素，而 ReactMount._mountImageIntoNode 則是將剛創(chuàng)建的 DOM 元素掛載到頁面。ReactReconciler.mountComponent 會調(diào)用 ReactCompositeComponent[T]的 mountComponent 方法。在看 mountComponent 方法前，還需要先準備好 hostContainerInfo，由 ReactDOMContainerInfo 生成：

// 文件位置：src/renderers/shared/stack/reconciler/ReactContainerInfo.js

function ReactDOMContainerInfo(
 topLevelWrapper, // ReactCompositeComponent[T]
 node // document.getElementById("root")
) {
 var info = {
 _topLevelWrapper: topLevelWrapper,
 _idCounter: 1,
 _ownerDocument: node ?
 node.nodeType === DOC_NODE_TYPE ? node : node.ownerDocument : null,
 _node: node,
 _tag: node ? node.nodeName.toLowerCase() : null,
 _namespaceURI: node ? node.namespaceURI : null,
 };
 
 ...
 
 return info;
}

現(xiàn)在各實例間的關(guān)系是這樣的：

再繼續(xù)看 mountComponent 方法：

// 文件位置：src/renderers/shared/stack/reconciler/ReactCompositeComponent.js

mountComponent: function (
 transaction,
 hostParent,
 hostContainerInfo,
 context
) {
 ...

 // this._currentElement 為ReactElement[2](TopLevelWrapper)
 var publicProps = this._currentElement.props;
 var publicContext = this._processContext(context);

 // TopLevelWrapper
 var Component = this._currentElement.type;

 ...

 // Initialize the public class
 var doConstruct = shouldConstruct(Component);
 
 // 生成TopLevelWrapper 實例
 var inst = this._constructComponent(
 doConstruct,
 publicProps,
 publicContext,
 updateQueue
 );
 
 ...

 var markup;
 
 ...
 
 markup = this.performInitialMount(renderedElement,
 hostParent, hostContainerInfo, transaction, context

 ...

 return markup;
},

performInitialMount: function (renderedElement, hostParent,
 hostContainerInfo, transaction, context) {
 
 // TopLevelWrapper 實例
 var inst = this._instance;

 ...
 
 // If not a stateless component, we now render
 if (renderedElement === undefined) {
 // 返回值為 ReactElement[1]
 renderedElement = this._renderValidatedComponent();
 }

 // 返回 ReactNodeTypes.HOST
 var nodeType = ReactNodeTypes.getType(renderedElement);
 
 this._renderedNodeType = nodeType;
 
 // instantiateReactComponent.js
 var child = this._instantiateReactComponent(
 renderedElement,
 nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */
 );
 this._renderedComponent = child;

 var markup = ReactReconciler.mountComponent(
 child,
 transaction,
 hostParent,
 hostContainerInfo,
 this._processChildContext(context),
 debugID
 );

 ...

 return markup;
},

當(dāng)運行到var child = this._instantiateReactComponent時，就會調(diào)用上篇文章說到的instantiateReactComponent文件：

// 文件位置：src/renderers/shared/stack/reconciler/instantiateReactComponent.js

function instantiateReactComponent(node, shouldHaveDebugID) {
 var instance;

 ...
 
 } else if (typeof node === 'object') {
 ...

 // element.type 為 ‘h1’
 if (typeof element.type === 'string') {
 instance = ReactHostComponent.createInternalComponent(element);
 } 

 return instance;
}

ReactDom 會在執(zhí)行的時候，執(zhí)行ReactDefaultInjection.inject()將 ReactDOMComponent 注入到 ReactHostComponent 中，ReactHostComponent.createInternalComponent 最終會調(diào)用 ReactDOMComponent：

// 文件位置：src/renderers/dom/shared/ReactDomComponent.js

function ReactDOMComponent(element) {
 // h1
 var tag = element.type;
 
 validateDangerousTag(tag);
 
 // ReactElement[1]
 this._currentElement = element;
 
 this._tag = tag.toLowerCase();
 this._namespaceURI = null;
 this._renderedChildren = null;
 this._previousStyle = null;
 this._previousStyleCopy = null;
 this._hostNode = null;
 this._hostParent = null;
 this._rootNodeID = 0;
 this._domID = 0;
 this._hostContainerInfo = null;
 this._wrapperState = null;
 this._topLevelWrapper = null;
 this._flags = 0;
}

我們將返回的實例命名為 ReactDOMComponent[ins]。

ReactReconciler.mountComponent 會調(diào)用 ReactDomComponent 的 mountComponent 方法，這就會涉及到 HTML DOM 相關(guān)的內(nèi)容，我們在下一篇進行講解。

現(xiàn)在我們來看一下各實例間的關(guān)系：

目前為止的調(diào)用棧：

|=ReactMount.render(nextElement, container, callback) ___
|=ReactMount._renderSubtreeIntoContainer() |
 |-ReactMount._renderNewRootComponent() |
 |-instantiateReactComponent() |
 |~batchedMountComponentIntoNode() upper half
 |~mountComponentIntoNode() (平臺無關(guān))
 |-ReactReconciler.mountComponent() |
 |-ReactCompositeComponent.mountComponent() |
 |-ReactCompositeComponent.performInitialMount() |
 |-instantiateReactComponent() _|_
 |-ReactDOMComponent.mountComponent() lower half
 |-_mountImageIntoNode() (HTML DOM 相關(guān)下一篇講解)
 _|_

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

React首次渲染解析二（純DOM元素）

推薦度：

點擊下載本文 文檔為doc格式

標簽：元素首次解析

熱門焦點

React首次渲染解析二（純DOM元素）

React首次渲染解析二（純DOM元素）

React首次渲染解析二（純DOM元素）

最新推薦

猜你喜歡

熱門推薦