Qu'est-ce que le «montage» dans React js?

J'entends trop souvent le terme «monter» en apprenant ReactJS. Et il semble y avoir des méthodes de cycle de vie et des erreurs concernant ce terme. Que signifie exactement React par montage?

Exemples: componentDidMount() and componentWillMount()

Le travail principal de React est de comprendre comment modifier le DOM pour qu'il corresponde à ce que les composants veulent être rendus à l'écran.

React le fait en «montant» (en ajoutant des nœuds au DOM), en «démontant» (en les supprimant du DOM) et en «mettant à jour» (en apportant des modifications aux nœuds déjà dans le DOM).

Comment un nœud React est représenté en tant que nœud DOM et où et quand il apparaît dans l'arborescence DOM est géré par l' API de niveau supérieur . Pour avoir une meilleure idée de ce qui se passe, regardez l'exemple le plus simple possible:

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

Alors qu'est-ce que c'est fooet que pouvez-vous en faire? foo, pour le moment, est un objet JavaScript simple qui ressemble à peu près à ceci (simplifié):

{
  type: FooComponent,
  props: {}
}

Il n'est actuellement nulle part sur la page, c'est-à-dire que ce n'est pas un élément DOM, n'existe nulle part dans l'arborescence DOM et, mis à part le nœud d'élément React, n'a pas d'autre représentation significative dans le document. Il indique simplement à React ce qui doit être à l'écran si cet élément React est rendu. Il n'est pas encore "monté".

Vous pouvez dire à React de le «monter» dans un conteneur DOM en appelant:

ReactDOM.render(foo, domContainer);

Cela indique à React qu'il est temps d'afficher foosur la page. React créera une instance de la FooComponentclasse et appellera sa renderméthode. Disons qu'il rend un <div />, dans ce cas, React créera un divnœud DOM pour lui et l'insérera dans le conteneur DOM.

Ce processus de création d'instances et de nœuds DOM correspondant aux composants React, et de leur insertion dans le DOM, est appelé montage.

Notez que normalement, vous n'appelez que ReactDOM.render()pour monter le (s) composant (s) racine. Vous n'avez pas besoin de «monter» manuellement les composants enfants. Chaque fois qu'un composant parent appelle setState()et que sa renderméthode indique qu'un enfant particulier doit être rendu pour la première fois, React "montera" automatiquement cet enfant dans son parent.

React est un framework isomorphe / universel . Cela signifie qu'il existe une représentation virtuelle de l'arborescence des composants de l'interface utilisateur, qui est distincte du rendu réel qu'elle génère dans le navigateur. De la documentation:

React est si rapide car il ne communique jamais directement avec le DOM. React maintient une représentation rapide en mémoire du DOM.

Cependant, cette représentation en mémoire n'est pas directement liée au DOM dans le navigateur (même si elle s'appelle Virtual DOM, qui est un nom malheureux et déroutant pour un cadre d'applications universelles), et il ne s'agit que de données de type DOM. structure qui représente toute la hiérarchie des composants de l'interface utilisateur et des métadonnées supplémentaires. Virtual DOM n'est qu'un détail d'implémentation.

«Nous pensons que les véritables fondements de React sont simplement des idées de composants et d'éléments: être capable de décrire ce que vous voulez rendre de manière déclarative. Ce sont les pièces partagées par tous ces différents packages. Les parties de React spécifiques à certains rendus les cibles ne sont généralement pas ce à quoi nous pensons lorsque nous pensons à React. " - Blog React js

Donc, la conclusion est que React est indépendant du rendu , ce qui signifie qu'il ne se soucie pas de la sortie finale. Cela peut être une arborescence DOM dans le navigateur, cela peut être du XML, des composants natifs ou JSON.

"Lorsque nous examinons des packages comme react-native, react-art, react-canvas et react-three, il est devenu clair que la beauté et l'essence de React n'ont rien à voir avec les navigateurs ou le DOM." - Blog React js

Maintenant que vous savez comment fonctionne React, il est facile de répondre à votre question :)

Le montage est le processus de sortie de la représentation virtuelle d'un composant dans la représentation finale de l'interface utilisateur (par exemple DOM ou composants natifs).

Dans un navigateur, cela signifierait la sortie d'un élément React dans un élément DOM réel (par exemple un élément HTML div ou li ) dans l'arborescence DOM. Dans une application native, cela signifierait la sortie d'un élément React dans un composant natif. Vous pouvez également écrire votre propre moteur de rendu et générer des composants React en JSON ou XML ou même XAML si vous en avez le courage.

Ainsi, les gestionnaires de montage / démontage sont essentiels pour une application React, car vous ne pouvez être sûr qu'un composant est sorti / rendu lorsqu'il est monté . Cependant, le componentDidMountgestionnaire n'est appelé que lors du rendu vers une représentation réelle de l'interface utilisateur (DOM ou composants natifs) mais pas si vous effectuez le rendu vers une chaîne HTML sur le serveur en utilisant renderToString, ce qui est logique, car le composant n'est pas réellement monté tant qu'il n'a pas atteint le navigateur et s'exécute dedans.

Et, oui, Montage est aussi un nom malheureux / déroutant, si vous me le demandez. IMHO componentDidRenderet componentWillRenderserait de bien meilleurs noms.

Le montage fait référence au composant dans React (nœuds DOM créés) attaché à une partie du document. C'est tout!

En ignorant React, vous pouvez considérer ces deux fonctions natives comme un montage:

remplacerEnfant

appendChild

Quelles sont probablement les fonctions les plus courantes utilisées par React pour monter en interne.

Penser à:

componentWillMount === avant le montage

Et:

componentDidMount === après le montage

https://facebook.github.io/react/docs/tutorial.html

Ici, componentDidMount est une méthode appelée automatiquement par React lorsqu'un composant est rendu.

Le concept est que vous dites à ReactJS, "veuillez prendre ce truc, cette zone de commentaire ou cette image tournante ou tout ce que je veux sur la page du navigateur, et allez-y et placez-le sur la page du navigateur. Lorsque cela est fait, appelez ma fonction à laquelle je me suis lié pour componentDidMountpouvoir continuer. "

componentWillMountest le contraire. Il se déclenchera immédiatement AVANT le rendu de votre composant.

Voir aussi ici https://facebook.github.io/react/docs/component-specs.html

Enfin, le terme "mount" semble être unique à react.js. Je ne pense pas que ce soit un concept javascript général, ni même un concept de navigateur général.

Le montage fait référence au chargement initial de la page lors du premier rendu de votre composant React. Depuis la documentation React pour le montage: componentDidMount:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

Vous pouvez comparer cela avec la fonction componentDidUpdate, qui est appelée à chaque fois que React rend (à l'exception du montage initial).

L'objectif principal de React js est de créer des composants réutilisables. Ici, les composants sont les différentes parties d'une page Web. Par exemple, dans une page Web, l'en-tête est un composant, le pied de page est un composant, une notification toast est un composant, etc. Le terme «montage» nous indique que ces composants sont chargés ou rendus dans le DOM. Ce sont de nombreuses API et méthodes de premier niveau traitant de cela.

Pour simplifier les choses, monté signifie que le composant a été chargé dans le DOM et démonté signifie que les composants ont été supprimés du DOM.