React子父组件生命周期函数执行顺序

react生命周期函数不做太多描述

App.jsx:

    constructor(props){
        super(props);
        console.log("App constructor")
    }
    
    componentWillMount(){
        console.log("App componentWillMount")
    }
    
    componentDidMount(){
        console.log("App componentDidMount")
    }
    render(){
        console.log("App render")
        return <div>Apppppppppp
            <A></A>
        </div>
    }

A.jsx:

    constructor(props){
        super(props);
        console.log("A constructor")
    }
    
    componentWillMount(){
        console.log("A componentWillMount")
    }
    
    componentDidMount(){
        console.log("A componentDidMount")
    }
    render(){
        console.log("A render")
        return <div>AAAA</div>
    }

输出结果:
App constructor
App componentWillMount
App render
A constructor
A componentWillMount
A render
A componentDidMount
App componentDidMount

也就是父组件在内存中生成页面树的时候先去制作子组件,等到子组件挂在到父组件某个节点时在继续内存渲染父组件知道父组件didmount.

多个子组件的情况

App.jsx:

    constructor(props){
        super(props);
        console.log("App constructor")
    }
    
    componentWillMount(){
        console.log("App componentWillMount")
    }
    
    componentDidMount(){
        console.log("App componentDidMount")
    }
    render(){
        console.log("App render")
        return <div>Apppppppppp
            <A></A>
            <B></B>
        </div>
    }

A.jsx不变 添加B.jsx:

    constructor(props){
        super(props);
        console.log("B constructor")
    }
    
    componentWillMount(){
        console.log("B componentWillMount")
    }
    
    componentDidMount(){
        console.log("B componentDidMount")
    }
    render(){
        console.log("B render")
        return <div>BBBB</div>
    }

结果输出:
App constructor
App componentWillMount
App render
A constructor
A componentWillMount
A render
B constructor
B componentWillMount
B render
A componentDidMount
B componentDidMount
App componentDidMount