反应 - 孩子的render（）方法在父的render（）方法完成后启动，为什么会这样？

Question

下面的反应代码打印：

before var rootElement
after var rootElement
render start
outer render start
outer render end
inner render start
inner render stop
render end

我在期待：

before var rootElement
after var rootElement
render start
outer render start
inner render start
inner render stop
outer render end
render end

如何解释这种行为？

这有什么意义？

为什么会这样？

是不是应该为每个孩子递归调用渲染（以第一种方式深度）？为什么不呢？

这种行为是在某处描述的吗？

我应该使用React的渲染来理解这种行为？

代码：

var CompInner = React.createClass({
    render: function() {
        console.log("inner render start")
        var res=React.createElement('div', {}, this.props.name,
            ' child1',' child2'
        )
        console.log('inner render end')
        return (res )
    },
});

var innerElement = React.createElement(CompInner, {name: "prop to inner"})

var CompOuter = React.createClass({
    render: function() {
        console.log("outer render start")
        var res=React.createElement('div', {}, this.props.name,
                innerElement)
        console.log("outer render end")
        return (res )
    },
});

var outerElement = React.createElement(CompOuter, {name: "prop to outer"})

console.log("before var rootElement")
var rootElement =
    React.createElement('div', {},
        React.createElement('h1', {}, "Contacts"),
        outerElement

);

console.log("after var rootElement")

console.log("render start")
ReactDOM.render(rootElement, document.getElementById('react-app'))
console.log("render end")
console.log("bla")