React嵌套组件加载顺序

/* 父组件 */
import React, { Component } from 'react';
import Header from './components/Header'
import Footer from './components/Footer'
import BodyIndex from './components/BodyIndex'

class App extends Component {
  componentWillMount() {
    console.log('App-页面即将加载')
  }

  componentDidMount() {
    console.log('App-页面加载完成')
  }
  render() {
    return (
      <div className="App">
        <Header />
        <BodyIndex />
        <Footer />
      </div>
    );
  }
}

export default App;

Header组件，Footer组件、BodyIndex组件同样是在componentWillMount和componentDidMount生命周期里调用console.log()

/* console.log()内容和顺序如下 */
App-页面即将加载
Header-页面即将加载
body-页面即将加载
Footer-页面即将加载
Header-页面加载完成
body-页面加载完成
Footer-页面加载完成
App-页面加载完成