[解決済み] 親のcomponentDidMountは子のcomponentDidMountの後に呼ばれるのですか？

質問

親のレンダーに以下のようなコードがあります。

<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の前に呼び出されます。

このように動作するのでしょうか？それとも、私が何か間違ったことをしているのでしょうか。

もしこれが動作の仕組みなら、すべての子コンポーネントが親から読み込まれたことをどのように検出するのでしょうか？

どのように解決するのですか?

アップデイト

この回答はReact15用です。現在のバージョンは17以上なので、これは関係ない可能性があります。

オリジナル

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