在所有子组件的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>

我认为只有在加载所有孩子之后才会调用 parent 的 componentDidMount。但是这里 parent 的 componentDidMount 是在 child 的 componentDidMount 之前调用的。

事情是这样运作的吗？还是我做错了什么。

如果事情是这样工作的，我将如何检测所有子组件何时从父组件加载？

Answer 1

更新

此答案适用于 React 15。当前版本为 17+，因此这可能无关紧要。

原创

是的，子代的componentDidMount 在父代之前被调用。

运行下面的代码！

documentation states:

在初始渲染发生后立即在客户端（而不是服务器）上调用一次。在生命周期的这一点上，您可以访问您的孩子的任何 refs（例如，访问底层的 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>