react在组件内插入标签_React组件插入DOM流程

1 简介

React广受好评的一个重要原因就是组件化开发，一方面分模块的方式便于协同开发，降低耦合，后期维护也轻松；另一方面使得一次开发，多处复用成为现实，甚至可以直接复用开源React组件。开发完一个组件后，我们需要插入DOM中，一般使用如下代码

ReactDOM.render(

Hello, world!

,

document.getElementById('example')

);

经过babel转码后为

ReactDOM.render(

React.createElement(

'h1', // type, DOM原生组件的type为string，React自定义组件type为Object

null, // config，会设置到ref，key，props中

'Hello, world!' // children，子组件.这儿为文本组件

),

document.getElementById('example')

)

那么React底层是怎么将组件插入DOM中的呢。本文来详细分析它的前因后果。

2 ReactMount._renderSubtreeIntoContainer()

ReactDOM.render()实际调用ReactMount.render(),接着调用到ReactMount._renderSubtreeIntoContainer().

这个调用链比较简单，不分析了。下面重点分析_renderSubtreeIntoContainer(). 我们去除掉开发调试阶段的报错代码(比如 “development” !== ‘production’)。

/**

* 将ReactElement插入DOM中，并返回ReactElement对应的ReactComponent。

* ReactElement是React元素在内存中的表示形式，可以理解为一个数据类，包含type，key，refs，props等成员变量

* ReactComponent是React元素的操作类，包含mountComponent(), updateComponent()等很多操作组件的方法

*

* @param {parentComponent} 父组件，对于第一次渲染，为null

* @param {nextElement} 要插入到DOM中的组件，对应上面例子中的

Hello, world!

经过babel转译后的元素

* @param {container} 要插入到的容器，对应上面例子中的document.getElementById('example')获取的DOM对象

* @param {callback} 第一次渲染为null

*

* @return {component} 返回ReactComponent，对于ReactDOM.render()调用，不用管返回值。

*/

_renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {

// 刚开始一段开发阶段的报错代码，省去

...

// 包装ReactElement，将nextElement挂载到wrapper的props属性下，这段代码不是很关键

var nextWrappedElement = ReactElement(TopLevelWrapper, null, null, null, null, null, nextElement);

// 获取要插入到的容器的前一次的ReactComponent，这是为了做DOM diff

// 对于ReactDOM.render()调用，prevComponent为null

var prevComponent = getTopLevelWrapperInContainer(container);

if (prevComponent) {

// 从prevComponent中获取到prevElement这个数据对象。一定要搞清楚ReactElement和ReactComponent的作用，他们很关键

var prevWrappedElement = prevComponent._currentElement;

var prevElement = prevWrappedElement.props;

// DOM diff精髓，同一层级内，type和key不变时，只用update就行。否则先unmount组件再mount组件

// 这是React为了避免递归太深，而做的DOM diff前提假设。它只对同一DOM层级，type相同，key(如果有)相同的组件做DOM diff，否则不用比较，直接先unmount再mount。这个假设使得diff算法复杂度从O(n^3)降低为O(n).

// shouldUpdateReactComponent源码请看后面的分析

if (shouldUpdateReactComponent(prevElement, nextElement)) {

var publicInst = prevComponent._renderedComponent.getPublicInstance();

var updatedCallback = callback && function () {

callback.call(publicInst);

};

// 只需要update，调用_updateRootComponent，然后直接return了

ReactMount._updateRootComponent(prevComponent, nextWrappedElement, container, updatedCallback);

return publicInst;

} else {

// 不做update，直接先卸载再挂载。即unmountComponent,再mountComponent。mountComponent在后面代码中进行

ReactMount.unmountComponentAtNode(container);

}

}

var reactRootElement = getReactRootElementInContainer(container);

var containerHasReactMarkup = reactRootElement && !!internalGetID(reactRootElement);

var containerHasNonRootReactChild = hasNonRootReactChild(container);

var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild;

// 初始化，渲染组件，然后插入到DOM中。_renderNewRootComponent很关键，后面详细分析

var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, parentComponent != null ? parentComponent._reactInternalInstance._processChildContext(parentComponent._reactInternalInstance._context) : emptyObject)._renderedComponent.getPublicInstance();

// render方法中带入的回调，ReactDOM.render()调用时一般不传入

if (callback) {

callback.call(component);

}

return component;

},

shouldUpdateReactComponent()源码如下：

function shouldUpdateReactComponent(prevElement, nextElement) {

// 前后两次ReactElement中任何一个为null，则必须另一个为null才返回true。这种情况一般不会碰到

var prevEmpty = prevElement === null || prevElement === false;

var nextEmpty = nextElement === null || nextElement === false;

if (prevEmpty || nextEmpty) {

return prevEmpty === nextEmpty;

}

var prevType = typeof prevElement;

var nextType = typeof nextElement;

// React DOM diff算法

if (prevType === 'string' || prevType === 'number') {

// 如果前后两次为数字或者字符,则认为只需要update(处理文本元素)，返回true

return (nextType === 'string' || nextType === 'number');

} else {

// 如果前后两次为DOM元素或React元素,则必须type和key不变(key用于listView等组件,很多时候我们没有设置key，故只需type相同)才update,否则先unmount再重新mount。返回false

return (

nextType === 'object' &&

prevElement.type === nextElement.type &&

prevElement.key === nextElement.key

);

}

}

3.ReactMount._renderNewRootComponent

_renderNewRootComponent: function (nextElement, container, shouldReuseMarkup, context) {

ReactBrowserEventEmitter.ensureScrollValueMonitoring();

// 初始化ReactComponent，根据ReactElement中不同的type字段，创建不同类型的组件对象，即ReactComponent

// 前一篇文章中已经分析了。http://blog.csdn.net/u013510838/article/details/55669769

var componentInstance = instantiateReactComponent(nextElement);

// 处理batchedMountComponentIntoNode方法调用，将ReactComponent插入DOM中，后面详细分析

ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);

var wrapperID = componentInstance._instance.rootID;

instancesByReactRootID[wrapperID] = componentInstance;

return componentInstance;

},

batchedMountComponentIntoNode以transaction事务的形式调用mountComponentIntoNode，源码分析如下。

function mountComponentIntoNode(wrapperInstance, container, transaction, shouldReuseMarkup, context) {

var markerName;

// 一段log，可以不管

if (ReactFeatureFlags.logTopLevelRenders) {

var wrappedElement = wrapperInstance._currentElement.props;

var type = wrappedElement.type;

markerName = 'React mount: ' + (typeof type === 'string' ? type : type.displayName || type.name);

console.time(markerName);

}

// 调用对应ReactComponent中的mountComponent方法来渲染组件，这个是React生命周期的重要方法。后面详细分析。

// mountComponent返回React组件解析的HTML。不同的ReactComponent的mountComponent策略不同，可以看做多态

// 上面的

Hello, world!

, 对应的是ReactDOMTextComponent，最终解析成的HTML为

//

Hello, world!

var markup = ReactReconciler.mountComponent(wrapperInstance, transaction, null, ReactDOMContainerInfo(wrapperInstance, container), context);

if (markerName) {

console.timeEnd(markerName);

}

wrapperInstance._renderedComponent._topLevelWrapper = wrapperInstance;

// 将解析出来的HTML插入DOM中

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

}

_mountImageIntoNode源码如下

_mountImageIntoNode: function (markup, container, instance, shouldReuseMarkup, transaction) {

// 对于ReactDOM.render()调用，shouldReuseMarkup为false

if (shouldReuseMarkup) {

...

}

if (transaction.useCreateElement) {

// 清空container的子节点，这个地方不明白为什么这么做

while (container.lastChild) {

container.removeChild(container.lastChild);

}

DOMLazyTree.insertTreeBefore(container, markup, null);

} else {

// 将markup这个HTML设置到container这个DOM元素的innerHTML属性上，这样就插入到了DOM中了

setInnerHTML(container, markup);

// 将instance这个ReactComponent渲染后的对象，即Virtual DOM，保存到container这个DOM元素的firstChild这个原生节点上。简单理解就是将Virtual DOM保存到内存中，这样可以大大提高交互效率

ReactDOMComponentTree.precacheNode(instance, container.firstChild);

}

}

4 总结

ReactDOM.render()是渲染React组件并插入到DOM中的入口方法，它的执行流程大概为

1.React.createElement(),创建ReactElement对象。�他的重要的成员变量有type,key,ref,props。这个过程中会调用getInitialState(), 初始化state，只在挂载的时候才调用。后面update时不再调用了。

2.instantiateReactComponent()，根据ReactElement的type分别创建ReactDOMComponent， ReactCompositeComponent，ReactDOMTextComponent等对象

3.mountComponent(), 调用React生命周期方法解析组件，得到它的HTML。

4._mountImageIntoNode(), 将HTML插入到DOM父节点中，通过设置DOM父节点的innerHTML属性。

5.缓存节点在React中的对应对象，即Virtual DOM。