Wordt componentDidMount van de ouder genoemd naar alle componentDidMount van kinderen?

Ik heb de onderstaande code in mijn weergave van ouder

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

En code hieronder in mijn kind-diagram

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

Ik dacht dat de componentDidMount van parent alleen wordt aangeroepen nadat alle onderliggende items zijn geladen. Maar hier wordt de componentDidMount van parent aangeroepen vóór de componentDidMount van child.

Is dit hoe de dingen werken? Of doe ik iets verkeerd.

Als dit is hoe de dingen werken, hoe kan ik dan detecteren wanneer alle onderliggende componenten worden geladen vanuit de ouder?

Antwoord 1, autoriteit 100%

UPDATE

Dit antwoord is voor React 15. de huidige versie is 17+, dus dit is mogelijk niet relevant.

ORIGINEEL

Ja, de componentDidMountvan kinderen wordt aangeroepen voor de ouder.

Voer de onderstaande code uit!

documentatie staten:

Eenmalig aangeroepen, alleen op de client (niet op de server), onmiddellijk nadat de eerste weergave heeft plaatsgevonden. Op dit punt in de levenscyclus hebt u toegang tot alle verwijzingen naar uw kinderen (bijvoorbeeld om toegang te krijgen tot de onderliggende DOM-representatie). De methode componentDidMount()van onderliggende componentenwordt aangeroepen vóór die van bovenliggende componenten.

Dit komt omdat u op het moment van renderen naar alle interne/onderliggende knooppunten zou moeten kunnen verwijzen, pogingen om toegang te krijgen tot bovenliggende knooppunten worden niet geaccepteerd.

Voer de onderstaande code uit. Het toont de uitvoer van de console.

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>