Qu'est ce que "Montage" dans React js?

Dans Réactif, les composants avec lesquels vous travaillez peuvent être représentés comme nœuds React et nœuds DOM.

Comment un noeud React est représenté comme un 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:

 let foo = React.createElement(FooComponent); 

Alors, qu'est-ce que tu peux faire avec ça? foo , pour le moment, est une instance d'un type de FooComponent . Ce n'est actuellement pas un élément sur la page, c'est-à-dire qu'il n'est pas un élément DOM, n'existe nulle part dans l'arborescence DOM et, en dehors du noeud de l'élément React, n'a aucune autre représentation significative dans le document.

Si vous React.findDOMNode(foo) vous recevriez un objet faussement. Pourquoi? foo n'a pas de représentation DOM car il n'existe actuellement aucun élément dans l'arborescence DOM.

Mais, une fois que vous essayez de monter un noeud d'élément React dans le document, vous déclencherez le cycle de vie des composants qui créera un nœud DOM géré approprié:

 React.render(foo, container); 

À partir de ce point, foo n'est plus seulement un noeud React. Il a un noeud DOM associé et est maintenant un citoyen de première classe dans le document. Vous pouvez maintenant le trouver en tant que noeud DOM réel quelque part dans l'arbre et interagir avec celui-ci comme vous le feriez avec d'autres éléments DOM: calculer sa hauteur, sa largeur, appliquer d'autres styles, passer à jQuery , etc.

Réagir est un cadre isomorphe / universel . Cela signifie qu'il existe une représentation virtuelle de l'arbre des composants de l'interface utilisateur, et cela est distinct du rendu réel qu'il produit dans le navigateur. De la documentation:

Réagir est si rapide car il ne parle jamais directement aux DOM. React maintient une représentation rapide en mémoire du DOM.

Cependant, cette représentation dans la mémoire n'est pas liée directement au DOM dans le navigateur (même si on l'appelle Virtual DOM, qui est un nom malheureux et confus pour un framework d'applications universel), et ce n'est qu'un fichier de type DOM, Structure qui représente l'ensemble de la hiérarchie des composants UI et des méta-données supplémentaires. Virtual DOM est juste un détail de mise en œuvre.

"Nous pensons que les fondements réels de React sont simplement des idées de composants et d'éléments: être en mesure 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 paquets. Les parties de React spécifiques à certains rendus Les cibles ne sont généralement pas ce que nous pensons lorsque nous pensons à React. " – React js Blog

Donc, la conclusion est que React est rendu agnostique , ce qui signifie qu'il ne se soucie pas de la sortie finale. Il peut s'agir d'un arbre DOM dans le navigateur, il peut s'agir de composants XML, Native ou JSON.

"En regardant les paquets comme réagir-natif, réagir-art, réagir-canvas, et réagir-trois, il est devenu évident que la beauté et l'essence de React n'ont rien à voir avec les navigateurs ou le DOM". – React js Blog

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 UI définitive (p. Ex. DOM ou Native Components).

Dans un navigateur, cela signifie produire un élément de réact dans un élément DOM réel (par exemple un élément HTML div ou li ) dans l'arborescence DOM. Dans une application native qui signifierait sortir un élément React dans un composant natif. Vous pouvez également écrire votre propre processeur et produire des composants React dans JSON ou XML ou même XAML si vous avez le courage.

Ainsi, les manipulateurs de montage / démontage sont essentiels pour une application React, car vous ne pouvez vous assurer qu'un composant est sorti / rendu lors de sa montée . Cependant, le gestionnaire de componentDidMount est invoqué uniquement lors du rendu à une représentation UI réelle (DOM ou Native Components), mais pas si vous renderToString une chaîne HTML sur le serveur à l'aide de renderToString , ce qui est logique, car le composant n'est pas monté jusqu'à ce qu'il Atteint le navigateur et s'y exécute.

Et, oui, le montage est également un nom malheureux / confus, si vous me le demandez. Le componentDidRender IMHODidRender et componentWillRender seraient bien meilleurs noms.

http://www.ministryofprogramming.com/react-js-the-king-of-universal-apps/

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 racontez ReactJS, "s'il vous plaît prenez cette chose, cette boîte de commentaire ou l'image tournante ou tout ce que je veux sur la page du navigateur, et allez-y et mettez-le sur la page du navigateur. Lorsque cela se fait, appelez Ma fonction que j'ai lié à componentDidMount afin que je puisse continuer. "

componentWillMount est le contraire. Il se déclenche immédiatement avant que votre composant ne soit effectué.

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

Enfin, le terme "mount" semble être unique à reaction.js. Je ne pense pas qu'il s'agisse d'un concept de javascript général, ni même d'un concept de navigateur général.

Le montage se réfère au chargement initial de la page lorsque votre composant React est rendu pour la première fois. De 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 le comparer avec la fonction componentDidUpdate, qui s'appelle chaque fois que React rend (sauf pour le montage initial).

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

En ignorant Réagir, vous pouvez penser à ces deux fonctions natives en tant que montage:

ReplaceChild

AppendChild

Quelles sont probablement les fonctions les plus communes, les utilisations réagissent pour être montées en interne.

Penser à:

ComponentWillMount === avant montage

Et:

ComponentDidMount === après montage

L'objectif principal de React js est de créer des composants réutilisables. Ici, les composants sont les parties individuelles 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 de toast est un composant et etc. Le terme "mount" nous indique que ces composants sont chargés ou rendus dans le DOM. Ce sont de nombreuses API et méthodes de premier plan qui traitent de ceci.

Pour le rendre simple, monté signifie que le composant a été chargé sur le DOM et qu'il n'a pas monté, les composants ont été retirés du DOM.