web-dev-qa-db-fra.com

À quel moment exactement `composantDidMount` est-il déclenché?

C'est un problème récurrent que j'ai avec React. Il est garanti que la méthode componentDidMount sera déclenchée lorsque le composant est restitué pour la première fois. Cela semble donc être un lieu naturel pour prendre des mesures DOM telles que des hauteurs et des décalages . cycle de vie du composant. Le composant est dans le DOM, lorsque je rompt avec le débogueur, mais qu'il n'est pas encore peint sur l'écran. Je rencontre ce problème avec des éléments dont la largeur/hauteur est définie à 100%, généralement . Lorsque je prends des mesures dans componentDidUpdate - tout fonctionne correctement, mais cette méthode ne se déclenche pas au rendu initial du composant.

Ma question est donc la suivante: à quel moment exactement componentDidMount est-il renvoyé, car ce n'est évidemment pas le cas une fois que toutes les peintures du navigateur sont terminées?.

EDIT:Ce numéro de Stackoverflow traite du même sujet:

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

reactjsreact-dom
22
disc0dancer

componentDidMount() est activé dans une arborescence de composants de réaction après le montage de tous les composants enfants. Cela signifie que la componentDidMount() de tout composant est déclenchéeavant que son parent n'ait été monté.

Donc, si vous voulez mesurer la position et les tailles du DOM, etc., utiliser componentDidMount() d'un composant enfant est un lieu/un moment peu sûr pour le faire.

Dans votre cas: pour obtenir une lecture précise des composants 100% largeur/hauteur, il est conseillé de procéder à de telles mesures dans la componentDidMount() du composanttopreact.
100% est une largeur/hauteur par rapport au parent/conteneur. Les mesures ne peuvent donc être prises qu'après le montage du parent.

27
wintvelt

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

Étant donné que vous prenez des mesures, il semblerait que vous souhaitiez également déclencher votre mesure lorsque componentDidUpdate au cas où vos mesures changeraient lorsque votre composant se mettrait à jour.

Veuillez noter que componentDidUpdate ne se produit pas pour le rendu initial, vous avez donc probablement besoin des deux événements de cycle de vie pour déclencher le traitement de vos mesures. Voir si ce deuxième événement déclenche pour vous et s'il a des mesures différentes.

À mon avis, vous devriez éviter d'utiliser setTimeout ou requestAnimationFrame lorsque cela est possible.

Référence du cycle de vie de React .

2
Scott

Si vous souhaitez répondre à quelque chose en cours de montage dans le DOM, le moyen le plus fiable consiste à utiliser un rappel ref . Par exemple:

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

Il est appelé une seule fois lorsque le composant est monté. C’est le moment idéal pour faire une requête asynchrone pour extraire les données d’une API. Les données récupérées seraient stockées dans l'état du composant interne afin d'être affichées dans la méthode de cycle de vie de render ().

Simple: Exécuter après les fonctions de rendu

1
Saad pasta

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

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

0
Jonathan Ong