Является ли componentDidMount родительского имени после того, как укомплектован компонент componentDidMount?

У меня есть код ниже в моем рендеринге родителя

Я думал, что 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>