父子组件按什么顺序渲染？

小编典典

父子组件按什么顺序渲染？

reactjs

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

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-孩子（CountdownForm）：

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;

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

阅读 364

2020-07-22

共1个答案

小编典典

我没有立即在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
父组件

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

class Child extends React.Component {

    constructor(props, ...rest) {

        super(props, ...rest);

        console.log(this.props.name + " constructor");

    }

    componentWillMount(...args) {

        console.log(this.props.name + " componentWillMount");

    }

    componentDidMount(...args) {

        console.log(this.props.name + " componentDidMount");

    }

    render() {

        console.log(this.props.name + " render");

        return <div>Hi from {this.props.name}!</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 result =

            <div>

                <Child name="Child1" />

                <Child name="Child2" />

            </div>;

        console.log("Parent render end");

        return result;

    }

}



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
父渲染开始
父渲染端
Child1构造函数
Child1组件WillMount
Child1渲染
Child2构造函数
Child2组件WillMount
Child2呈现
Child1组件DidMount
Child2组件
父组件

一点也不奇怪，但是可以仔细检查。:-)

2020-07-22