react 细节知识总结

1.一个组件father中有两个组件A,B，A中又含有grandson组件,分别在组件中componentWillMount，render,componentDidMount打印日志，会怎么打印那？

    父组件：    

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ComponentOne from './test/ComponentOne.js';
import ComponentTwo from './test/ComponentTwo.js';


class App extends Component {


  componentWillMount(){
    console.log('father will mount')
  }


  componentDidMount(){
    console.log('father did mount')
  }


  render() {
    console.log('father rendering...')
    return (
      <div className="App">
        <ComponentOne></ComponentOne>
        <ComponentTwo></ComponentTwo>
      </div>
    );
  }
}


export default App;

子组件A:

import React, { Component } from 'react';
import LifeCircle from './LifeCircle.js';
export default class ComponentOne extends Component {


  componentWillMount(){
    console.log('hello, component first will mount')
  }




  componentDidMount(){
    console.log('hello, component first did mount')
  }


  render() {
    console.log('component first rendering...')
    return (
      <div>
        <LifeCircle></LifeCircle>
        <div>component first</div>
      </div>
    );
  }
}

子组件b:

import React, { Component } from 'react';
export default class TestComponent extends Component {


  componentWillMount(){
    console.log('hello, component two will mount')
  }


  componentDidMount(){
    console.log('hello, component two did mount')
  }


  render() {
    console.log('component two rendering...')
    return (
      <div>component first</div>
    );
  }
}

grandson组件：

import React, { Component } from 'react';
export default class TestComponent extends Component {

  componentWillMount(){
    console.log('grandson will mount')
  }

  componentDidMount(){
    console.log('grandson did mount')
  }

  render() {
    console.log('grandson rendering...')
    return (
      <div>grandson</div>
    );
  }
}

结果

Download the React DevTools for a better development experience: https://fb.me/react-devtools
App.js:10 father will mount
App.js:18 father rendering...
ComponentOne.js:6 hello, component first will mount
ComponentOne.js:15 component first rendering...
LifeCircle.js:5 grandson will mount
LifeCircle.js:13 grandson rendering...
ComponentTwo.js:5 hello, component two will mount
ComponentTwo.js:13 component two rendering...
LifeCircle.js:9 grandson did mount
ComponentOne.js:11 hello, component first did mount
ComponentTwo.js:9 hello, component two did mount
App.js:14 father did mount

now you will see it clearly.  

      1.父组件先执行will mount;然后渲染,执行render;

     2.在render中遇到子组件

     3.第一个子组件依次进行执行 will mout; 然后渲染，执行render; 如果又遇到子组件，然后，还按照步骤3执行

     4.第二子组件按照第三个步骤走

     5.子子组件先挂载，子组件挂载（也就是自下而上依次挂载）

     6.父组件挂载