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

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

1.单个子组件

父组件：

constructor(props) {
    super(props);
    console.log("BABA constructor")
  }

  componentWillMount() {
    console.log("BABA componentWillMount")
  }

  componentDidMount() {
    console.log("BABA componentDidMount")
  }
  render() {
    console.log("BABA render")
    return (
      <div>
        <div>baba</div>
        <A></A>
      </div>
    )
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

子组件A:

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>A</div>
    )
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

输出结果:

BABA constructor
BABA componentWillMount
BABA render
A constructor
A componentWillMount
A render
A componentDidMount
BABA componentDidMount
1
2
3
4
5
6
7
8

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

2.多个子组件

render() {
    console.log("BABA render")
    return (
      <div>
        <div>baba</div>
        <A></A>
        <B></B>
      </div>
    )
  }
1
2
3
4
5
6
7
8
9
10

输出结果:

BABA constructor
BABA componentWillMount
BABA render
A constructor
A componentWillMount
A render
B constructor
B componentWillMount
B render
A componentDidMount
B componentDidMount
BABA componentDidMount
1
2
3
4
5
6
7
8
9
10
11
12

多个子组件，按顺序，第一个子组件componentDidMount执行完，再是第二个，最后是父组件