react - children's render() method starts after parent's render() method has finished , why is this ?

问题

The react code below prints:

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

I was expecting:

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

How can this behaviour be explained ?

How does this make sense ?

Why is this happening ?

Isn't it so that render should be recursively called for each children (in a depth first manner ) ? Why not ?

Is this behaviour described somewhere ?

What mental model should I have of React's render to understand this behaviour ?

Code:

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

来源：https://stackoverflow.com/questions/44642191/react-childrens-render-method-starts-after-parents-render-method-has-fin

标签

reactjs