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

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

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

React首次渲染的解析一（純DOM元素）:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于React首次渲染的解析（純DOM元素），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。React 是一個(gè)十分龐大的庫，由于要同時(shí)考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀React首次渲染的解析一（純DOM元素）:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于React首次渲染的解析（純DOM元素），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。React 是一個(gè)十分龐大的庫，由于要同時(shí)考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌

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

React 是一個(gè)十分龐大的庫，由于要同時(shí)考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌套層級(jí)非常深，閱讀其源碼是一個(gè)非常艱辛的過程。在學(xué)習(xí) React 源碼的過程中，給我?guī)椭畲蟮木褪沁@個(gè)系列文章，于是決定基于這個(gè)系列文章談一下自己的理解。本文會(huì)大量用到原文中的例子，想體會(huì)原汁原味的感覺，推薦閱讀原文。

本系列文章將基于 React 15.4.2。

React.createElement

在寫 React 項(xiàng)目的時(shí)候，我們一般會(huì)直接用 JSX 的形式來寫，而 JSX 經(jīng)過 Babel 編譯后最終會(huì)將 HTML 標(biāo)簽轉(zhuǎn)換為React.createElement的函數(shù)形式。如果想進(jìn)行更深入的了解，可以看我之前寫的這篇文章：你不知道的Virtual DOM（一）：Virtual Dom介紹。文章中的h函數(shù)，如果不在 Babel 中配置的話，默認(rèn)就是React.createElement。

下面，我們將從一個(gè)最簡單的例子，來看React是如何渲染的

ReactDOM.render(
 <h1 style={{"color":"blue"}}>hello world</h1>,
 document.getElementById('root')
);

經(jīng)過JSX編譯后，會(huì)是下面這個(gè)樣子

ReactDOM.render(
 React.createElement(
 'h1',
 { style: { "color": "blue" } },
 'hello world'
 ),
 document.getElementById('root')
);

先來看下React.createElement的源碼。

// 文件位置：src/isomorphic/React.js

var ReactElement = require('ReactElement');

...

var createElement = ReactElement.createElement;

...

var React = {
 ...
 
 createElement: createElement,
 
 ...
}

module.exports = React;

最終的實(shí)現(xiàn)需要查看ReactElement.createElement：

// 文件位置：src/isomorphic/classic/element/ReactElement.js

ReactElement.createElement = function (type, config, children) {
 ...

 // 1. 將過濾后的有效的屬性，從config拷貝到props
 if (config != null) {
 
 ...
 
 for (propName in config) {
 if (hasOwnProperty.call(config, propName) &&
 !RESERVED_PROPS.hasOwnProperty(propName)) {
 props[propName] = config[propName];
 }
 }
 }

 // 2. 將children以數(shù)組的形式拷貝到props.children屬性
 var childrenLength = arguments.length - 2;
 if (childrenLength === 1) {
 props.children = children;
 } else if (childrenLength > 1) {
 var childArray = Array(childrenLength);
 for (var i = 0; i < childrenLength; i++) {
 childArray[i] = arguments[i + 2];
 }
 if (__DEV__) {
 if (Object.freeze) {
 Object.freeze(childArray);
 }
 }
 props.children = childArray;
 }

 // 3. 默認(rèn)屬性賦值
 if (type && type.defaultProps) {
 var defaultProps = type.defaultProps;
 for (propName in defaultProps) {
 if (props[propName] === undefined) {
 props[propName] = defaultProps[propName];
 }
 }
 }
 
 ...
 
 return ReactElement(
 type,
 key,
 ref,
 self,
 source,
 ReactCurrentOwner.current,
 props
 );
};

本質(zhì)上只做了3件事：

將過濾后的有效的屬性，從config拷貝到props
將children以數(shù)組的形式拷貝到props.children屬性
默認(rèn)屬性賦值

最終的返回值是ReactElement。我們再來看看它做了什么

// 文件位置：src/isomorphic/classic/element/ReactElement.js

var ReactElement = function (type, key, ref, self, source, owner, props) {
 var element = {
 // This tag allow us to uniquely identify this as a React Element
 $$typeof: REACT_ELEMENT_TYPE,

 // Built-in properties that belong on the element
 type: type,
 key: key,
 ref: ref,
 props: props,

 // Record the component responsible for creating this element.
 _owner: owner,
 };
 
 ...

 return element;
};

最終只是返回了一個(gè)簡單對(duì)象。調(diào)用棧是這樣的：

React.createElement
|=ReactElement.createElement(type, config, children)
 |-ReactElement(type,..., props)

這里生成的 ReactElement 我們將其命名為ReactElement[1]，它將作為參數(shù)傳入到 ReactDom.render。

ReactDom.render

ReactDom.render 最終會(huì)調(diào)用 ReactMount 的 _renderSubtreeIntoContainer：

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

_renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
 ...
 var nextWrappedElement = React.createElement(
 TopLevelWrapper, 
 {
 child: nextElement
 }
 );

 ...
 
 var component = ReactMount._renderNewRootComponent(
 nextWrappedElement,
 container,
 shouldReuseMarkup,
 nextContext
 )._renderedComponent.getPublicInstance();
 
 ...
 
 return component;
},

...

var TopLevelWrapper = function () {
 this.rootID = topLevelRootCounter++;
};

TopLevelWrapper.prototype.isReactComponent = {};

TopLevelWrapper.prototype.render = function () {
 return this.props.child;
};

TopLevelWrapper.isReactTopLevelWrapper = true;

...

_renderNewRootComponent: function (
 nextElement,
 container,
 shouldReuseMarkup,
 context
) {
 ...
 
 var componentInstance = instantiateReactComponent(nextElement, false);

 ...

 return componentInstance;
},

這里又會(huì)調(diào)用到另一個(gè)文件 instantiateReactComponent：

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

function instantiateReactComponent(node, shouldHaveDebugID) {
 var instance;

 ...

 instance = new ReactCompositeComponentWrapper(element);
 
 ...

 return instance;
}

// To avoid a cyclic dependency, we create the final class in this module
var ReactCompositeComponentWrapper = function (element) {
 this.construct(element);
};

Object.assign(
 ReactCompositeComponentWrapper.prototype,
 ReactCompositeComponent, 
 {
 _instantiateReactComponent: instantiateReactComponent,
 }
);

這里又會(huì)調(diào)用到另一個(gè)文件 ReactCompositeComponent：

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

var ReactCompositeComponent = {
 construct: function (element) {
 this._currentElement = element;
 this._rootNodeID = 0;
 this._compositeType = null;
 this._instance = null;
 this._hostParent = null;
 this._hostContainerInfo = null;

 // See ReactUpdateQueue
 this._updateBatchNumber = null;
 this._pendingElement = null;
 this._pendingStateQueue = null;
 this._pendingReplaceState = false;
 this._pendingForceUpdate = false;

 this._renderedNodeType = null;
 this._renderedComponent = null;
 this._context = null;
 this._mountOrder = 0;
 this._topLevelWrapper = null;

 // See ReactUpdates and ReactUpdateQueue.
 this._pendingCallbacks = null;

 // ComponentWillUnmount shall only be called once
 this._calledComponentWillUnmount = false;

 if (__DEV__) {
 this._warnedAboutRefsInRender = false;
 }
 }
 
 ...
}

我們用ReactCompositeComponent[T]來表示這里生成的頂層 component。

整個(gè)的調(diào)用棧是這樣的：

ReactDOM.render
|=ReactMount.render(nextElement, container, callback)
|=ReactMount._renderSubtreeIntoContainer()
 |-ReactMount._renderNewRootComponent(
 nextWrappedElement, // scr:------------------> ReactElement[2]
 container, // scr:------------------> document.getElementById('root')
 shouldReuseMarkup, // scr: null from ReactDom.render()
 nextContext, // scr: emptyObject from ReactDom.render()
 )
 |-instantiateReactComponent(
 node, // scr:------------------> ReactElement[2]
 shouldHaveDebugID /* false */
 )
 |-ReactCompositeComponentWrapper(
 element // scr:------------------> ReactElement[2]
 );
 |=ReactCompositeComponent.construct(element)

組件間的層級(jí)結(jié)構(gòu)是這樣的：