Vue

//父组件
export default {
  name: "App",
  components: { Footer, Header },
  data() {
    return {
      value: 1
    };
  },
  beforeCreate() {
    console.log("父组件 beforeCreate");
  },
  created() {
    console.log("父组件 created");
  },
  beforeMount() {
    console.log("父组件 beforeMount");
  },
  mounted() {
    console.log("父组件 mounted");
  },
  beforeDestroy() {
    console.log("父组件 beforeDestroy");
  },
  destroyed() {
    console.log("父组件 destroyed");
  },
//Header
export default {
  name: "header",
  beforeCreate() {
    console.log("header beforeCreate");
  },
  created() {
    console.log("header created");
  },
  beforeMount() {
    console.log("header beforeMount");
  },
  mounted() {
    console.log("header mounted");
  },
  beforeDestroy() {
    console.log("header beforeDestroy");
  },
  destroyed() {
    console.log("header destroyed");
  },
  components: {},
  data() {
    return {};
  }
};
//Footer
export default {
  name: "footer",
  components: {},
  beforeCreate() {
    console.log("footer beforeCreate");
  },
  created() {
    console.log("footer created");
  },
  beforeMount() {
    console.log("footer beforeMount");
  },
  mounted() {
    console.log("footer mounted");
  },
  beforeDestroy() {
    console.log("footer beforeDestroy");
  },
  destroyed() {
    console.log("footer destroyed");
  },
  data() {
    return {};
  }
};

父组件 beforeCreate
父组件 created
父组件 beforeMount
header beforeCreate
header created
header beforeMount
footer beforeCreate
footer created
footer beforeMount
header mounted
footer mounted
父组件 mounted

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;

App-页面即将加载
Header-页面即将加载
body-页面即将加载
Footer-页面即将加载
Header-页面加载完成
body-页面加载完成
Footer-页面加载完成
App-页面加载完成