Reactjs 反应-儿童'；s render（）方法在父级'；s render（）方法已完成，这是为什么？

下面的react代码打印：

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

如何解释这种行为

这有什么意义

为什么会这样

是不是应该为每个子级递归调用render（以深度优先的方式）？为什么不呢

这种行为在什么地方被描述过吗

对于React的表现，我应该有什么样的心智模型来理解这种行为

代码：

---

看起来相关：嗯，我想我开始明白了，vdom实际上是一棵懒惰的树，就像在Haskell中一样，对吧？

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")