父级的componentDidMount是否在子级的所有componentDidMount之后调用？

Question

我父母的渲染中有以下代码

<div>           
{
    this.state.OSMData.map(function(item, index) {
        return <Chart key={index} feature={item} ref="charts" />
    })
}
</div>

以及下面我孩子图表中的代码

<div className="all-charts">
    <ChartistGraph data={chartData} type="Line" options={options} />
</div>

我以为仅在所有子项都加载后才调用父级的componentDidMount。但是在这里，父级的componentDidMount在子级的componentDidMount之前被调用。

这是工作方式吗？还是我做错了什么。

如果这是工作方式，我如何检测从父级加载所有子级组件的时间？

Answer 1

是的componentDidMount，孩子的称为父母之前的。

运行下面的代码！

文档状态：

初始渲染发生后立即仅在客户端（而不是服务器）上调用一次。在生命周期的这一点上，您可以访问子代的任何引用（例如，访问基础的DOM表示形式）。
子组件* 的componentDidMount()方法在父组件的方法之前被调用。 *

这是因为在渲染时，您应该能够引用任何内部/子节点，并且不尝试访问父节点。

运行下面的代码 。它显示控制台输出。

var ChildThing = React.createClass({

  componentDidMount: function(){console.log('child mount')},

  render: function() {

    return <div>Hello {this.props.name}</div>;

  }

});



var Parent = React.createClass({

  componentDidMount: function(){console.log('parent')},

  render: function() {

    return <div>Sup, child{this.props.children}</div>;

  }

});



var App = React.createClass({

  componentDidMount: function(){console.log('app')},

  render: function() {

    return (

      <div>

        <Parent>

          <ChildThing name="World" />

        </Parent>

      </div>

    );

  }

});



ReactDOM.render(

  <App />,

  document.getElementById('container')

);


<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>



<div id="container">

    <!-- This element's contents will be replaced with your component. -->

</div>