TechCodeview

DOM réel/navigateur :

DOM signifie 'Modèle objet de document'. Il s'agit d'une représentation structurée du HTML dans la page Web ou l'application. Il représente l'intégralité de l'interface utilisateur (Interface utilisateur) de la application Web comme structure de données arborescente.

C'est un représentation structurelle des éléments HTML d'une application Web en termes simples.

Chaque fois qu'il y a un changement dans le état de l'interface utilisateur de l'application, DOM est mis à jour et représente le changement. Le DOM est rendu et manipulé à chaque modification pour mettre à jour l'interface utilisateur de l'application, ce qui affecte les performances et les ralentit.

Par conséquent, avec de nombreux composants d’interface utilisateur et la structure complexe de DOM, Sa mise à jour coûtera plus cher car elle devra être restituée à chaque modification.

Le DOM est constitué comme une structure de données arborescente. Il se compose du nœud pour chaque Élément d'interface utilisateur présents dans le document web.

sélectionner SQL à partir de plusieurs tables

Mise à jour du DOM :

Si nous en connaissons quelques-uns sur JavaScript, vous verrez peut-être des personnes utiliser le 'getElementById()' ou 'getElementByClass()' méthode pour modifier le contenu du DOM.

Chaque fois qu'un changement se produit dans l'état de votre application, le DOM est mis à jour pour refléter le changement dans l'interface utilisateur.

Comment Virtual DOM accélère les choses :

Lorsque de nouveaux éléments sont ajoutés à l'application, le DOM virtuel est créé, représenté sous forme d'arborescence. Chaque élément de l'application est un nœud dans l'arborescence.

Par conséquent, chaque fois qu'il y a un changement dans la position d'un élément, un nouveau DOM virtuel est créé. L'arborescence DOM virtuelle la plus récente est comparée à la plus récente, où les modifications sont notées.

Il trouve le moyen possible d'effectuer ces modifications via le DOM actuel. Ensuite, les éléments mis à jour seraient restitués sur la page.

Comment Virtual DOM aide dans React :

Tout dans React est observé comme un composant, un composant fonctionnel et un composant de classe. Un composant a un état. Chaque fois que nous modifions quelque chose dans le fichier JSX, pour faire simple, chaque fois que l'état du composant est modifié, le React met à jour son arborescence DOM virtuelle.

React maintient à chaque fois deux DOM virtuels. Le premier contient le DOM virtuel mis à jour et l'autre est une version pré-mise à jour du DOM virtuel mis à jour. Il compare la version pré-mise à jour du DOM virtuel mis à jour et recherche ce qui a été modifié dans le DOM, comme les composants qui seront modifiés.

Bien que cela puisse paraître inefficace, le coût n’est pas plus élevé, car la mise à jour du DOM virtuel ne peut pas prendre beaucoup de temps.

Lorsque l'on compare l'arborescence DOM virtuelle actuelle avec la précédente, on parle de 'défiant'. Une fois que React sait ce qui a changé, il met à jour les objets dans le DOM réel. React utilise des mises à jour par lots pour mettre à jour le DOM réel. Les modifications apportées au DOM réel sont envoyées par lots plutôt que d'envoyer des mises à jour pour un seul changement dans l'état du composant.

Le rendu de l'interface utilisateur est la partie la plus coûteuse, et React parvient à le faire le plus efficacement possible en garantissant que le Real DOM qui reçoit les mises à jour par lots restitue l'interface utilisateur. Le processus de conversion des modifications vers le DOM réel est appelé réconciliation.

Il améliore les performances et c'est la principale raison pour laquelle les développeurs aiment React et son DOM virtuel.

Qu'est-ce que le DOM virtuel de React ?

Le concept de Virtual DOM vient améliorer et accélérer les performances du Real DOM. Virtual DOM est un symbole virtuel du DOM.

Mais la principale différence est qu’à chaque fois, à chaque changement, le DOM virtuel est mis à jour au lieu du DOM réel.

Par exemple, le réel et DOM virtuel est représenté comme un arborescence. Chaque élément de l'arborescence est un nœud. UN nœud est ajouté à l'arborescence lorsqu'un nouvel élément est ajouté à l'interface utilisateur de l'application.

Si la position d'un élément change, un nouveau L'arborescence DOM virtuelle est créée. Le DOM virtuel calcule le nombre minimum d'opérations sur le vrai DOM pour apporter des modifications au vrai DOM. Il est efficace et fonctionne mieux en réduisant le coût et l'opération de rendu de l'ensemble du DOM réel.

Nous avons maintenant une compréhension normale du DOM réel et virtuel.

Voyons comment Réagir fonctionne en utilisant DOM virtuel.

• Chaque interface utilisateur est un individu composant, et chaque composant a son état.
• Réagir suit modèles observables et observe les changements d'états.
• Chaque fois qu'une modification est apportée à l'état du composant, React met à jour l'arborescence DOM virtuelle mais ne change pas le arbre DOM réel.
• Réagir compare le version actuelle de la DOM virtuel avec le la version précédente après mise à jour.
• React sait quels objets sont modifiés dans le DOM virtuel. Il remplace les objets dans le DOM réel , menant à manipulation minimale opérations.
• Ce processus est connu sous le nom 'différenciation'. Cette image rendra le concept clair.

Sur l'image, le bleu foncé cercles sont les nœuds qui ont été modifiés. Le État de ces composants a changé. React calcule la différence entre la version précédente et actuelle du arborescence DOM virtuelle, et l'intégralité du sous-arbre parent est restituée pour afficher l'interface utilisateur qui est modifiée.

L'arborescence mise à jour est lot mis à jour (que les mises à jour du vrai DOM sont envoyées par lots au lieu d'envoyer des mises à jour pour chaque changement d'état.) au vrai DOM.

Pour approfondir cela, nous devons connaître le Réagir au rendu () fonction.

Ensuite, nous devons connaître certains des points importants caractéristiques de React.

JSX

JSX représente XML JavaScript. C'est un extension de syntaxe de JS. En utilisant JSX, nous pouvons écrire Structures HTML dans le fichier qui contient Code JavaScript.

Composants

Les composants sont indépendant et réutilisable de code. Chaque interface utilisateur de l'application React est un composant. Une seule application comporte plusieurs Composants.

Les composants sont de deux types, composants de classe et composants fonctionnels.

Les composants de classe sont avec état car ils utilisent leur « état » pour modifier l'interface utilisateur. Les composants fonctionnels sont des composants sans état. Ils agissent comme une fonction JavaScript qui prend un paramètre arbitraire appelé « props ».

Réagir aux crochets ont été introduits pour accéder aux états avec des composants fonctionnels.

convertisseur de chaîne en entier

Méthodes de cycle de vie

Méthodes de cycle de vie sont des méthodes importantes intégré pour réagir, qui opèrent sur les composants pendant toute leur durée dans le DOM. Chaque composant de React est passé par un cycle de vie d'événements.

La méthode render() est le maximum utilisé méthode du cycle de vie .

C'est la seule méthode au sein Composants de classe React . Ainsi, dans chaque classe, le composant render() est appelé.

La méthode render() gère le rendu du composant par l'interface utilisateur. Le render() contient toute la logique affichée à l’écran. Il peut également avoir un nul valeur si nous ne voulons rien afficher à l’écran.

L'exemple est présenté ci-dessous :

 class Header extends React.Component{ render(){ return React Introduction } } 

L'exemple montrera le JSX écrit dans le render().

Lorsqu'un État ou soutenir est mis à jour au sein du composant, rendre() renverra une arborescence différente d'éléments React.

Lors de l'écriture du code dans la console ou dans le fichier JavaScript, ceci se produira :

• Le navigateur analyse le HTML pour trouver le nœud avec l'ID.
• Il supprime l'élément enfant de l'élément.
• Il met à jour l'élément (DOM) avec le « valeur mise à jour ».
• Il recalcule CSS pour les nœuds parents et enfants.
• Ensuite, mettez à jour la mise en page.

Enfin, parcourez l’arborescence sur l’écran.

Comme nous le savons, la mise à jour du DOMAINE implique de modifier le contenu. Il y est plus attaché.

Des algorithmes complexes sont impliqués dans le recalcul du CSS et la modification des mises en page, ce qui affecte les performances.

Ainsi, React dispose de nombreuses façons de gérer ce problème, car il utilise ce qu'on appelle le DOM virtuel.

réaction

Le package React-dom fournit des méthodes spécifiques au DOM au niveau supérieur de l'application pour échapper au modèle React si nécessaire.

 import * as ReactDOM from 'react-dom'; 

Si vous utilisez ES5 avec npm, vous devez également écrire :

 var ReactDOM = require('react-dom'); 

Le réagir-dom Le package fournit également des modules spécifiques aux applications client et serveur :

• réagir-dom/client
• réagir-dom/serveur

Le package React-Dom exporte ces méthodes :

• créer un portail()
• flushSync()

Les méthodes React-Dom sont également exportées :

• rendre ()
• hydrater ()
• trouverDOMNode()
• démonterComponentAtNode ()

Remarque : hydrate et render ont été remplacés par des méthodes client plus récentes.

Prise en charge du navigateur

React prend en charge tous les navigateurs modernes et certains polyfills sont requis pour les anciennes versions.

Remarque : Nous ne pouvons pas prendre en charge les anciens navigateurs qui ne prennent pas en charge les méthodes ES5, comme Internet Explorer. Vous pouvez constater que les applications fonctionnent dans les derniers navigateurs si les polyfills comme es5-shim et es5-sham sont inclus dans la page, mais vous êtes seul si vous empruntez le chemin.

Référence

créer un portail()

Creates Portal () Portal fournit le moyen de lire les enfants dans le nœud DOM, qui existe en dehors du classement du composant DOM.

flushSync()

Forcez simultanément les mises à jour de React dans le rappel fourni. Cela garantit que le DOM est mis à jour immédiatement.

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. 

Note:

• Utiliser avec modération. Flush Sync a considérablement nui aux performances.
• FlushSync forcera les limites en attente à afficher l'état de repli.
• Il exécute les effets en attente et applique simultanément les mises à jour avant de les renvoyer.
• flushSync vide les mises à jour en dehors du rappel pour vider les mises à jour du rappel. Par exemple, s'il y a des mises à jour en attente suite à un clic, React peut les vider avant de vider les mises à jour lors du rappel.

Référence héritée

rendre()

 render(element, container[, callback]) 

Remarque : Le rendu est remplacé par la création de Root dans React. Rendu un élément React dans le DOM au niveau du conteneur fourni et restituez une référence au composant.

Si un élément React était précédemment rendu dans n'importe quel conteneur, il effectuerait une mise à jour sur celui-ci et il est nécessaire de refléter le dernier élément React.

Il est exécuté lorsque le composant est rendu si le rappel facultatif est fourni.

Note:

La méthode Render () contrôle le contenu du nœud conteneur lors de son passage. Tout élément DOM existant est remplacé.

Render() ne modifie pas le nœud du conteneur (il ne peut modifier que les enfants du conteneur). Il pourrait être possible d'insérer un composant dans un nœud DOM existant sans écraser les éléments enfants.

Render () renvoie actuellement une référence à l'instance racine de ReactComponent.

Cependant, sa valeur de retour est héritée et peut être évitée car, dans certains cas, les futures versions de React peuvent générer des composants de manière asynchrone.

Si vous avez besoin d'une référence au prototype ReactComponent, la meilleure solution consiste à attacher une référence de rappel à l'élément.

Render() est utilisé pour hydrater un conteneur rendu sur le serveur qui est obsolète. Utiliser hydrateRoot() à sa place.

hydrater()

l'hydrate est remplacé par la racine hydratée.

C'est exactement comme render() mais est utilisé pour un conteneur dont le contenu HTML est rendu par ReactDOMServer. React tentera de connecter les écouteurs d'événements au balisage actuel.

 hydrate(element, container[, callback]) 

Note:

React s'attend à ce que le contenu rendu soit identique entre le serveur et le client. Nous pouvons corriger le contenu du texte, mais nous devons traiter les incohérences comme des erreurs et les corriger. En mode développement, React prévient de l'incohérence lors de l'hydratation.

Rien ne garantit que les différences spécifiques seront corrigées pour les écarts.

C'est important pour des raisons de performances dans la plupart des applications, et il sera trop coûteux de valider tous les indicateurs.

Supposons que l'attribut ou le contenu textuel d'un élément diffère inévitablement entre le serveur et le client (par exemple, l'horodatage ). Dans ce cas, nous pouvons faire taire l'alerte en ajoutant suppressHydrationWarning = {true} à l'élément.

S'il ne s'agit pas d'un élément de texte, il ne peut pas essayer de le corriger afin qu'il reste incohérent jusqu'à de futures mises à jour.

Vous pouvez effectuer un rendu en deux passes si nous devons délibérément fournir des valeurs différentes sur le serveur et le client. Les composants laissés sur le client peuvent lire des variables d'état comme this.state.isClient, où elles seront définies sur true dans composantDidMount().

intelligence artificielle et agents intelligents

La passe de rendu initiale fera la même chose que le serveur, évitant les incohérences, mais la passe supplémentaire sera effectuée de manière synchrone après hydratation.

Remarque : Cette approche rendra les composants plus lents puisqu'ils le font deux fois, alors utilisez-la avec précaution.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Note:

démonterComponentAtNode a été remplacé par root.unmount() dans Réagir. Il efface le composant React monté du DOM et nettoie ses gestionnaires d'événements et son état.

Si aucun composant n'a été monté sur le conteneur, celui-ci ne peut rien faire. Renvoie vrai si aucun composant n'est monté et faux s'il n'y a aucun composant à démonter.

trouverDOMNode()

Remarque : findDOMNode est une trappe d'évacuation utilisée pour accéder au nœud DOM sous-jacent. Cette trappe de secours est déconseillée dans la plupart des cas car elle perce l'abstraction du composant. Il est obsolète dans StrictMode.

findDOMNode (composant)

Si ce composant a été monté sur le DOM, cela renvoie l'élément DOM natif du navigateur correspondant. Cette méthode est utile pour lire les valeurs du DOM, telles que les valeurs des champs de formulaire, et effectuer des mesures DOM. Dans la plupart des cas, vous pouvez attacher une référence au nœud DOM et éviter d'utiliser findDOMNode.

Lorsqu'un composant renvoie null ou false, findDOMNode renvoie null. Lorsqu'un composant est rendu sous forme de chaîne, findDOMNode renvoie un nœud DOM de texte contenant cette valeur. Le composant peut renvoyer un fragment avec plusieurs enfants au cas où findDOMNode aurait renvoyé le nœud DOM correspondant au premier enfant non vide.

Note:

findDOMNode ne fonctionne que sur les composants montés (c'est-à-dire les composants qui ont été placés dans le DOM). Si vous essayez d'appeler ceci sur un composant qui n'a pas encore été monté (par exemple en appelant findDOMNode() sur render() sur un composant qui n'a pas encore été créé), une exception sera levée.

findDOMNode ne peut pas être utilisé dans les composants de fonction.

Éléments DOM

React implémente un système DOM indépendant du navigateur pour les performances et avec une compatibilité entre navigateurs. Nous profitons de cette occasion pour nettoyer certaines aspérités de l'implémentation DOM du navigateur.

Dans React, toutes les propriétés et attributs DOM (y compris les gestionnaires d'événements) doivent être en camelcase. Par exemple, l'attribut HTML tabindex correspond à l'attribut tab Index dans React.

Les exceptions sont les attributs aria-* et data-*, qui doivent être en minuscules. Par exemple, vous pouvez avoir une balise de zone comme balise de zone.

Différences dans les attributs

Plusieurs attributs fonctionneront différemment entre React et HTML :

vérifié

L'attribut vérifié est pris en charge par les composants d'une case à cocher ou d'une radio de type . Il est utile pour fabriquer des composants contrôlés. Vous pouvez l'utiliser pour déterminer si le composant est coché ou non.

DefaultChecked est la contrepartie non vérifiée qui détermine que le composant est vérifié la première fois qu'il est monté.

nom du cours

Pour spécifier la classe CSS, utilisez l'attribut className. Il s'applique à tous les éléments DOM et SVG classiques comme , , etc.

Si vous utilisez React avec des composants Web (rare), utilisez plutôt l'attribut class.

dangereusementSetInnerHTML

Dangereusement, SetInnerHTML remplace React pour l'utilisation de innerHTML dans le navigateur DOM. La configuration du code HTML est risquée car il est facile d'exposer les utilisateurs à une attaque de script intersite (XSS).

On peut donc paramétrer le HTML directement depuis React, mais il faut taper dangereusement SetInnerHTML et passer un objet avec la clé __html pour se rappeler que c'est dangereux.

Par exemple:

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor 

Les éléments React utilisent plutôt htmlFor, puisque for est un mot réservé en JavaScript.

sur le changement

L'événement onChange se comporte comme prévu ; l'événement se déclenche chaque fois qu'un champ de formulaire est modifié.

Nous n'utilisons pas intentionnellement le comportement du navigateur existant, car le changement est important pour son comportement et React s'appuie sur l'événement pour gérer les entrées de l'utilisateur en temps réel.

choisi

Si vous souhaitez marquer le comme sélectionné, reportez-vous plutôt à la valeur de cette option dans la valeur du . Voir « Sélectionner une balise » pour des instructions détaillées.

Note:

Dans la plupart des cas, les noms de classes font référence à des classes définies dans une feuille de style CSS externe. Les styles sont utilisés dans les applications React pour ajouter des styles calculés au moment du rendu. L'attribut style accepte l'objet JavaScript avec des propriétés camel au lieu d'une chaîne CSS.

Il est conforme DOM-style Propriétés JavaScript, est plus efficace et évite XSS Trous de sécurité.

Par exemple:

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } 

Notez que : les styles ne sont pas auto-préfixés. Pour prendre en charge les anciens navigateurs, nous devons fournir des propriétés de style :

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } 

Les clés de style sont camel pour correspondre à l'accès aux propriétés sur les nœuds DOM depuis JS. Les préfixes des fournisseurs MS commencent par une lettre majuscule.

chaîne comparer à java

React ajoutera automatiquement un suffixe « px » à certaines propriétés de style de numéro en ligne. Si nous voulons utiliser des unités autres que « px », spécifiez la valeur sous forme de chaîne avec l'unité souhaitée.

Par exemple:

 // Result style: '10px' Hello World! // Result style: '10%' Hello World! 

Toutefois, toutes les propriétés de style ne sont pas converties en chaînes de pixels.

Supprimer l'alerte de contenu modifiable

Il y a un avertissement si un élément destiné aux enfants est marqué comme contenu modifiable, car il ne fonctionnera pas. L'attribut supprime l'avertissement.

Avertissement de suppression

Si nous utilisons le rendu React côté serveur, il s'agit d'un avertissement lorsque le serveur et le client effectuent un rendu avec un contenu différent. Cependant, il est difficile de garantir une correspondance exacte dans de rares cas. Par exemple, les horodatages devraient différer sur le serveur ou sur le client.

Si vous définissez l'avertissement de suppression sur true, il ne vous avertira pas des incohérences entre les attributs et le contenu de l'élément.

Il ne fonctionnait qu’à un niveau de profondeur et était destiné à être utilisé comme échappatoire.

valeur

L'attribut value est conçu par les composants , et . Vous pouvez l'utiliser pour définir la valeur du composant.

Il est utile pour fabriquer des composants contrôlés. defaultValue et égal à non coché définissent la valeur du composant lorsqu'il est monté en série.

Tous les attributs HTML pris en charge

Tous les attributs DOM personnalisés et standard sont pris en charge.

React a fourni une API centrée sur JavaScript dans le DOM. Et les composants React contiennent souvent des accessoires personnalisés et liés au DOM, puis React utilise les mêmes conventions CamelCase que l'API DOM :

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API