ComponentDidMount của cha có được gọi sau tất cả componentDidMount của con không?

Tôi có mã dưới đây trong kết xuất phụ huynh của tôi

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

Và mã bên dưới trong Biểu đồ con của tôi

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

Tôi nghĩ rằng componentDidMount của cha mẹ chỉ được gọi sau khi tất cả các phần tử con được tải. Nhưng ở đây componentDidMount của cha được gọi trước componentDidMount của con.

Đây có phải là cách mọi thứ hoạt động? Hay tôi đang làm gì đó sai.

Nếu đây là cách mọi thứ hoạt động, làm cách nào để phát hiện khi tất cả các thành phần con được tải từ cha mẹ?

Có, componentDidMountcon cái được gọi trước cha mẹ.

Chạy mã dưới đây!

tài liệu tuyên bố :

Được gọi một lần, chỉ trên máy khách (không phải trên máy chủ), ngay sau khi kết xuất ban đầu xảy ra. Tại thời điểm này trong vòng đời, bạn có thể truy cập bất kỳ tài liệu tham khảo nào cho con của bạn (ví dụ: để truy cập bản đại diện DOM cơ bản). Các componentDidMount()phương pháp của các thành phần con được gọi trước đó của các thành phần cha mẹ.

Điều này là do tại thời điểm hiển thị, bạn sẽ có thể tham chiếu đến bất kỳ nút nội bộ / nút con nào, việc cố gắng truy cập các nút mẹ không được chấp nhận.

Chạy mã dưới đây . Nó hiển thị đầu ra bảng điều khiển.

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>