Последовательность вызовов componentWillMount в React.Яш

согласно этой странице http://busypeoples.github.io/post/react-component-lifecycle/ метод render для компонента вызывается прямо между componentWillMount и componentDidMount методы среди других мест.

но реагируют.документация js для жизненных циклов компонентов здесь https://facebook.github.io/react/docs/component-specs.html говорит, что componentDidMount методы всех дочерних действий вызываются перед родителем. Я могу это понять. componentDidMount можно вызывать после отображения любых дочерних компонентов, но как среда выполнения знает, какие дочерние компоненты вызывать componentWillMount функция включена, прежде чем они будут отображаться? Или я прав, предполагая, что componentWillMount вызывается для родительского действия сначала, а затем для детей (в отличие от componentDidMount)?

спасибо!

6
facebook html javascript reactjs single-page-application

2 ответов

OK. вот так. Если у вас есть простая структура с родителем и 2 детьми, как это:

<Parent>
  <Child/>
  <Child/>
</Parent>

тогда последовательность событий стрельбы будет:

  1. <Parent> componentWillMount()
  2. <Parent> render(), который начинает отображать детей
  3. <Child> componentWillMount() первого ребенка
  4. <Child> render() первого ребенка
  5. <Child> componentWillMount() второго ребенка
  6. <Child> render() второго ребенка
  7. <Child> componentDidMount() из первый ребенок (они будут запускаться только после запуска последнего рендеринга в дереве)
  8. <Child> componentDidMount() второго ребенка
  9. <Parent> componentDidMount() (этот будет работать только после того, как его последний ребенок побежал componentDidMount)

вы можете найти пример codepen здесь.

14

вы могли бы поставить консоль.log() в каждом из методов, чтобы увидеть их порядок, напечатанный в консоли.

-1