Чи викликається компонентDidMount з батьків після всіх компонентівДідМаунт дочірніх?

Question 1

У моєму візуалізації батьків є код нижче

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

Я думав, що батьківський компонентDidMount викликається лише після завантаження всіх дочірніх елементів. Але тут компонентDidMount батьківського викликається перед компонентомDidMount дочірнього.

Це так працює? Або я роблю щось не так.

Якщо все так працює, як я можу визначити, коли всі дочірні компоненти завантажуються з батьківського?

Question 2

Так, 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>

Розгорніть фрагмент