19
2021
01

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-页面加载完成

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。