父子组件按什么顺序渲染？

我没有立即在React文档中看到清晰的“这是父子之间的生命周期事件的顺序”，尽管我可能会错过它。

当然，凭经验确定是微不足道的：

class Child extends React.Component {    constructor(...args) {        super(...args);        console.log("Child constructor");    }    componentWillMount(...args) {        console.log("Child componentWillMount");    }    componentDidMount(...args) {        console.log("Child componentDidMount");    }    render() {        console.log("Child render");        return <div>Hi there</div>;    }}class Parent extends React.Component {    constructor(...args) {        super(...args);        console.log("Parent constructor");    }    componentWillMount(...args) {        console.log("Parent componentWillMount");    }    componentDidMount(...args) {        console.log("Parent componentDidMount");    }    render() {        console.log("Parent render start");        const c = <Child />;        console.log("Parent render end");        return c;    }}ReactDOM.render(<Parent />, document.getElementById("react"));.as-console-wrapper {  max-height: 100% !important;}<div id="react"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这向我们显示了顺序：

父构造器父组件WillMount父渲染开始父渲染端子构造函数子组件WillMount儿童渲染子组件DidMount父组件

这让我想知道父母中孩子的顺序，所以：

class Child extends React.Component {    constructor(props, ...rest) {        super(props, ...rest);        console.log(this.props.name + " constructor");    }    componentWillMount(...args) {        console.log(this.props.name + " componentWillMount");    }    componentDidMount(...args) {        console.log(this.props.name + " componentDidMount");    }    render() {        console.log(this.props.name + " render");        return <div>Hi from {this.props.name}!</div>;    }}class Parent extends React.Component {    constructor(...args) {        super(...args);        console.log("Parent constructor");    }    componentWillMount(...args) {        console.log("Parent componentWillMount");    }    componentDidMount(...args) {        console.log("Parent componentDidMount");    }    render() {        console.log("Parent render start");        const result = <div>     <Child name="Child1" />     <Child name="Child2" /> </div>;        console.log("Parent render end");        return result;    }}ReactDOM.render(<Parent />, document.getElementById("react"));.as-console-wrapper {  max-height: 100% !important;}<div id="react"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这给了我们：

父构造器父组件WillMount父渲染开始父渲染端Child1构造函数Child1组件WillMountChild1渲染Child2构造函数Child2组件WillMountChild2呈现Child1组件DidMountChild2组件父组件

一点也不奇怪，但是可以仔细检查。:-)