react源代码重点难点分析 (3)

//ReactDOMComponent是针对html元素，在这个minimum项目中，根组件template中只有一个<div>元素节点
ReactDOMComponent.Mixin = {
　　mountComponent: function (transaction, hostParent, hostContainerInfo, context) { //只针对<div>执行一次
　　　　var tagContent = this._createContentMarkup(transaction, props, context);

　　　　　　_createContentMarkup: function (transaction, props, context) {
　　　　　　　　var mountImages = this.mountChildren(childrenToUse, transaction, context);

　　　　　　　　　　mountChildren: function (nestedChildren, transaction, context) {
　　　　　　　　　　　　var children = this._reconcilerInstantiateChildren(nestedChildren, transaction, context);

　　　　　　　　　　　　　　_reconcilerInstantiateChildren: function (nestedChildren, transaction, context) {
　　　　　　　　　　　　　　　　return ReactChildReconciler.instantiateChildren(nestedChildren, transaction, context);

　　　　　　　　　　　　　　　　　　instantiateChildren: function (nestedChildNodes, transaction, context, ) {
　　　　　　　　　　　　　　　　　　　　return instantiateChild(childInsts, child, name, selfDebugID);

　　　　　　　　　　　　　　　　　　　　　　function instantiateChild(childInstances, child, name, selfDebugID) {
　　　　　　　　　　　　　　　　　　　　　　　　childInstances[name] = instantiateReactComponent(child, true);

再回到mountComponentIntoNode看Reconciler.mountComponent从根元素provider开始递归编译子节点之后再执行什么：

function mountComponentIntoNode(wrapperInstance, container, transaction, shouldReu 
　　var markup = ReactReconciler.mountComponent(wrapperInstance, transaction,

　　ReactMount._mountImageIntoNode(markup, container, wrapperInstance, shouldReuseMarkup, transaction);
　　//这是递归完成之后执行的方法，就是把编译结果插入网页生效，编译结果就是一个<div>字符串</div>，具体的方法无非是用innerHTML/Context方法，或者用appendChild方法，本文忽略

　　

至此可以小结一下从根Element开始的处理流程：
Element -> wrapper instance -> instance.mountComponent(compile) -> new instance._currentElement.type()组件实例 -> 组件实例.render()产生Element -> 递归子节点

 

元素树结构：
provider->router->connect->app

每层元素根据类型创建instance，执行其mountComponent，再new 组件实例inst，再执行组件实例inst的render()方法产生一个element，再递归。

 

connect的render方法：
Connect.prototype.render = function render() {
this.renderedElement = (0, _react.createElement)(WrappedComponent, this.mergedProps);

当store中的属性变化触发执行connect组件的render方法时，可以看到，它产生的Element是App组件元素，那么递归编译处理就是编译App组件，就是更新App组件，connect是App的代理组件，App组件并没有定义props属性，也没有定义如何更新。

router的render方法：
render: function render(props) {
return _react2.default.createElement(_RouterContext2.default, props);
}
router也会创建一个element，带路由参数。