Подтвердить что ты не робот

Является ли 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 родителя вызывается только после загрузки всех дочерних элементов. Но здесь компонентDidMount родительского вызова вызывается перед компонентом childdidMount.

Как это работает? Или я делаю что-то неправильно.

Если это так, как я могу определить, когда все дочерние компоненты загружаются из родителя?

Ответ 1

Да, дети 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 contents will be replaced with your component. -->
</div>