Wird componentDidMount des übergeordneten Elements nach allen componentDidMount der untergeordneten Elemente aufgerufen?

Ich habe den folgenden Code in meinem Render des Elternteils

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

Und Code unten in meinem Kinderdiagramm

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

Ich dachte, die componentDidMount des Elternteils wird erst aufgerufen, nachdem alle Kinder geladen wurden. Hier wird jedoch die componentDidMount des übergeordneten Elements vor der componentDidMount des untergeordneten Elements aufgerufen.

Funktionieren die Dinge so? Oder mache ich etwas falsch?

Wenn die Dinge so funktionieren, wie würde ich erkennen, wenn alle untergeordneten Komponenten vom übergeordneten geladen werden?

Ja, die componentDidMountKinder werden vor den Eltern angerufen.

Führen Sie den folgenden Code aus!

Dokumentation besagt :

Einmal aufgerufen, nur auf dem Client (nicht auf dem Server), unmittelbar nach dem ersten Rendern. Zu diesem Zeitpunkt im Lebenszyklus können Sie auf alle Refs Ihrer Kinder zugreifen (z. B. um auf die zugrunde liegende DOM-Darstellung zuzugreifen). Die componentDidMount()Methode der untergeordneten Komponenten wird vor der der übergeordneten Komponenten aufgerufen.

Dies liegt daran, dass Sie zum Zeitpunkt des Renderns auf interne / untergeordnete Knoten verweisen können sollten. Der Versuch, auf übergeordnete Knoten zuzugreifen, wird nicht akzeptiert.

Führen Sie den folgenden Code aus . Es zeigt die Konsolenausgabe.

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>