react挂载渲染流程

instantiateReactComponent.js

又回到了ReactReconciler.mountComponent，递归渲染

PooledClass.addPoolingTo(CopyConstructor)用于将构造函数CopyConstructor转化为工厂函数，意义是管理实例数据的创建和销毁，并将销毁数据的实例推入到实例池CopyConstructor.instancePool中。

ReactMultiChild.js

整合

③

PooledClass.js

单例对象

ReactDefaultBatchingStrategy.js

var topLevelRootCounter = 1;var TopLevelWrapper = function() { this.rootID = topLevelRootCounter++;};TopLevelWrapper.prototype.isReactComponent = {};if (__DEV__) { TopLevelWrapper.displayName = 'TopLevelWrapper';}TopLevelWrapper.prototype.render = function() { return this.props.child;};TopLevelWrapper.isReactTopLevelWrapper = true;

如果可以到执行这一步，则这条路线递归终止。

ReactReconcileTransaction.js

Transaction.js

ReactCompositeComponent.js

componentInstance，可以操作组件声明周期

定位：

ReactDOMComponent.js

if (typeof element.type === 'string') { instance = ReactHostComponent.createInternalComponent(element); }return instance;

初始挂载的时候，type为TopLevelWrapper

②

实例化自定义组件，流程如右

返回组件操作实例数组

又回到了ReactReconciler.mountComponent

ReactHostComponent.js

ReactUpdates.js

ReactMount.js

如果nodeType为COMPOSITE这里又回到了①，如果为ReactNodeTypes.HOST，则为另一路径②

ReactChildReconciler.js

处理挂载子组件

实例对象自身 存储 实例对象引用，操作如右图

①

ReactDOMTextComponent.js

internalInstance为管理文本节点的操作对象

递归渲染返回结果加入数组

同①②③的逻辑

好比开始的组件render 后的ReactElement对象。

nextElement是wrapped后的

创建一半标签

需要分析PooledClass，是干嘛的

后面4个参数，都会被当做batchedMountComponentIntoNode执行时的参数

得到ReactUpdateQueue实例

这里element赋值给了_currentELement

ReactReconciler.js

mountComponentIntoNode()

render(){ return( {this.props.children} 123 )}

创建标签内容

执行结果

初始化挂载

if (typeof node === 'string' || typeof node === 'number') { instance = ReactHostComponent.createInstanceForText(node); } return instance;

在上一步中，执行行了这里的初始化操作

ReactDOMStackInjection.js

得到事务实例

transaction又是被包装后的实例

//在ReactDOM.js中执行的 //ReactDOMStackInjection.inject();ReactHostComponent.injection.injectGenericComponentClass( ReactDOMComponent ); ReactHostComponent.injection.injectTextComponentClass( ReactDOMTextComponent );

ReactInstanceMap.js

注入