Question Quand exactement `componentDidMount` est-il déclenché?


C'est un problème récurrent avec React. le componentDidMount Il est garanti que la méthode est déclenchée lorsque le composant est rendu pour la première fois. Il semble donc naturel de prendre des mesures DOM telles que des hauteurs et des décalages. Cependant, je reçois souvent de mauvaises lectures de style à ce stade du cycle de vie du composant. Le composant est dans le DOM, quand je romps avec le débogueur, mais ce n'est pas encore peint à l'écran. Je rencontre ce problème avec des éléments dont la largeur / hauteur est définie à 100%. Quand je prends des mesures componentDidUpdate - tout fonctionne bien, mais cette méthode ne se déclenche pas lors du rendu initial du composant.

Donc, ma question est - quand exactement componentDidMount tiré parce qu'il est évidemment pas déclenché après que toutes les peintures du navigateur sont effectuées.

MODIFIER: Ce problème de Stackoverflow traite du même sujet:

Il fait également référence cette conversation github qui explique ce qui se passe


17
2018-03-17 00:24


origine


Réponses:


À l'intérieur d'une arborescence de composants de réaction, componentDidMount() est déclenché après que tous les composants enfants ont également été montés. Cela signifie que n'importe quel composant componentDidMount() est viré avant que son parent ait été monté.

Donc, si vous voulez mesurer la position et la taille du DOM, en utilisant componentDidMount() d'un composant enfant est un lieu / heure dangereux pour le faire.

Dans votre cas: pour obtenir une lecture précise à partir de composants 100% largeur / hauteur, un endroit sûr pour prendre de telles mesures serait à l'intérieur du componentDidMount() du Haut composant de réaction.
100% est une largeur / hauteur par rapport au parent / conteneur. Les mesures ne peuvent donc être prises qu'après le montage du parent.


21
2018-03-17 09:44



Comme vous le savez peut-être, componentDidMount est déclenché une seule fois immédiatement après le rendu initial.

Puisque vous prenez des mesures, il semblerait que vous souhaitiez également déclencher votre mesure lorsque componentDidUpdate dans le cas où vos mesures changent lorsque vos mises à jour des composants.

S'il vous plaît noter que componentDidUpdate ne se produit pas pour le rendu initial, vous avez donc probablement besoin des deux événements du cycle de vie pour déclencher votre traitement des mesures. Vérifiez si ce deuxième événement se déclenche pour vous et s'il comporte des mesures différentes.

A mon avis, vous devriez éviter d'utiliser setTimeout ou requestAnimationFrame quand c'est possible.

React Lifecycle Reference.


2
2018-03-17 02:43



Si vous voulez répondre à quelque chose monté dans le DOM, la manière la plus fiable de le faire est ref rappel. Par exemple:

render() {
  return (
    <div
      ref={(el) => {
        if (el) {
          // el is the <div> in the DOM. Do your calculations here!
        }
      }}
    ></div>
  );  
}

1
2018-01-27 23:13



vous pouvez essayer de retarder la logique dans componentDidMount() avec requestAnimationFrame(). la logique devrait se produire après la peinture suivante.

Cependant, nous aurions besoin d'en savoir plus sur votre code pour voir pourquoi les nœuds n'ont pas été peints. Je n'ai jamais rencontré ce problème. componentDidMount() se déclenche juste après que les nœuds dom sont ajoutés à la page, mais pas nécessairement après avoir été peints.


0
2018-03-17 02:49