父子组件以什么顺序呈现？

IT技术 javascript html reactjs dom jsx
2021-04-27 03:56:39

如果我有这样的两个组件（父子组件）：

1-父母（倒计时）：

var Countdown = React.createClass({
  getInitialState: function(){
    return{count: 0};
  },
  handleSetCountdown: function(seconds){
    this.setState({
      count: seconds
    });
  },
  render:function(){
    var {count} = this.state;
    return(
      <div>
        <Clock totalSeconds={count}/>
        <CountdownForm onSetCountdown={this.handleSetCountdown} />
      </div>
    );
  }
});

module.exports =Countdown;

2-孩子（倒计时形式）：

var CountdownForm = React.createClass({
  onSubmit: function(e){
    e.preventDefault();
    var strSeconds = this.refs.seconds.value;
    if(strSeconds.match(/^[0-9]*$/)){
      this.refs.seconds.value ='';
      this.props.onSetCountdown(parseInt(strSeconds,10));

    }
  },
  render: function(){
    return(
      <div>
        <form ref="form" onSubmit={this.onSubmit} className="countdown-form">
          <input type="text" ref="seconds" placeholder="Enter Time In Seconds"/>
          <button className="button expanded">Start</button>
        </form>
      </div>
    );
  }
});

module.exports = CountdownForm;

我对生命周期（组件呈现的顺序）感到困惑？

4个回答

我没有立即在 React 文档中看到明确的“这是父子之间的生命周期事件的顺序”，尽管我可能会遗漏它。

当然，凭经验确定是微不足道的：

class Child extends React.Component {
    constructor(...args) {
        super(...args);
        console.log("Child constructor");
    }
    componentWillMount(...args) {
        console.log("Child componentWillMount");
    }
    componentDidMount(...args) {
        console.log("Child componentDidMount");
    }
    render() {
        console.log("Child render");
        return <div>Hi there</div>;
    }
}

class Parent extends React.Component {
    constructor(...args) {
        super(...args);
        console.log("Parent constructor");
    }
    componentWillMount(...args) {
        console.log("Parent componentWillMount");
    }
    componentDidMount(...args) {
        console.log("Parent componentDidMount");
    }
    render() {
        console.log("Parent render start");
        const c = <Child />;
        console.log("Parent render end");
        return c;
    }
}

ReactDOM.render(<Parent />, document.getElementById("react"));
.as-console-wrapper {
  max-height: 100% !important;
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这向我们展示了顺序：

父构造函数
父组件WillMount
父渲染开始
父渲染结束
子构造函数
子组件WillMount
子渲染
子组件DidMount
父组件DidMount

这让我想知道父母中孩子的顺序，所以：

显示代码片段

这给了我们：

父构造函数
父组件WillMount
父渲染开始
父渲染结束
Child1 构造函数
Child1 组件WillMount
Child1 渲染
Child2 构造函数
Child2 组件WillMount
Child2 渲染
Child1 组件DidMount
Child2 组件DidMount
父组件DidMount

一点也不令人惊讶，但值得仔细检查。:-)

只需将 componentWillUnmount 添加到循环中：

显示代码片段

结果 ： 

Parent constructor
Parent componentWillMount
Parent render start
Parent render end
Child1 constructor
Child1 componentWillMount
Child1 render
Child2 constructor
Child2 componentWillMount
Child2 render
Child1 componentDidMount
Child2 componentDidMount
Parent componentDidMount
Parent componentWillUnmount
Child1 componentWillUnmount
Child2 componentWillUnmount

现场演示

react父子生命周期顺序

https://33qrr.csb.app/

https://codesandbox.io/s/react-parent-child-lifecycle-order-33qrr

创建订单


parent constructor
parent WillMount
parent render

child constructor
child WillMount
child render
child DidMount

parent DidMount

破坏秩序

parent WillUnmount

child WillUnmount

// child unmount

// parent unmount

所述渲染命令在的顺序执行react组件树，然而，安装顺序是相反的顺序（与最内子部件安装第一）。

其它你可能感兴趣的问题
上一篇挤出机/喷​​嘴的寿命是多久？ 下一篇ABS 或 PLA 用于结构印刷部件？