当前位置:   article > 正文

React父子组件生命周期函数执行顺序_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执行完,再是第二个,最后是父组件

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/木道寻08/article/detail/857499
推荐阅读
相关标签
  

闽ICP备14008679号