Séquence d'appels componentWillMount dans React.js

Question

Selon cette page http://busypeoples.github.io/post/react-component-lifecycle/ La méthode de rendu d'un composant est appelée juste entre les éléments suivants componentWillMount y componentDidMount entre autres.

Mais la documentation de react.js pour les cycles de vie des composants ici https://facebook.github.io/react/docs/component-specs.html dit que le componentDidMount les méthodes de toutes les activités enfants sont appelées avant celles du parent. Je peux comprendre que componentDidMount peut être appelé après le rendu des composants enfants, mais comment le runtime sait-il quels enfants appeler la fonction componentWillMount avant qu'elles ne soient rendues ? Ou ai-je raison de supposer que componentWillMount est appelé d'abord pour l'activité mère, puis pour les enfants (contrairement à l'activité componentDidMount ) ?

Gracias.

Answer 1

OK, alors voilà. Si vous avez une structure simple avec un parent et 2 enfants comme ceci :

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

Alors la séquence d'événements de tir sera :

1. <Parent> componentWillMount()
2. <Parent> render() qui commence à rendre les enfants
3. <Child> componentWillMount() du premier enfant
4. <Child> render() du premier enfant
5. <Child> componentWillMount() du deuxième enfant
6. <Child> render() du deuxième enfant
7. <Child> componentDidMount() du premier enfant (ceux-ci ne démarreront qu'après l'exécution du dernier rendu de l'arbre)
8. <Child> componentDidMount() du deuxième enfant
9. <Parent> componentDidMount() (celui-ci ne s'exécutera qu'après que son dernier enfant se soit exécuté. componentDidMount )

Vous pouvez trouver un exemple de codepen ici .

Answer 2

Vous pourriez mettre une console.log() dans chacune des méthodes pour voir leur ordre imprimé dans la console.