Dans React, l'élément est la plus petite unité de construction, un objet, pas un élément DOM ; peut être défini dans le code à l'aide de jsx, et la syntaxe est "const element =..."; souhaitez modifier le DOM, vous ne pouvez créer qu'un nouvel élément.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version React 17.0.1, ordinateur Dell G3.
Élément
1.Element est la plus petite unité de construction de React. C'est un objet, pas un DOM, et le coût de création est relativement faible.
(1) Habituellement, nous utilisons JSX pour définir un élément dans le code :
const element = <h1>Bonjour tout le monde</h1> ;(2) Utilisez ReactDOM.render pour le rendu
ReactDOM.render( element, document.getElementById('root') );2. Une fois qu'un élément est créé, il ne peut pas être modifié. C'est comme une image dans un film. Si vous souhaitez modifier l'affichage du DOM, vous pouvez uniquement créer un nouvel élément.
3. React comparera les deux éléments avant et après et mettra à jour uniquement le contenu qui doit être mis à jour.
Élargissez vos connaissances :
DOM virtuel
1. React ne construit pas directement les éléments DOM, mais crée des objets similaires à la structure DOM. Ensuite, le vrai DOM est rendu sur la base de cette structure, qui est React DOM.
2. Lorsqu'il y a un changement, créez un nouvel objet, comparez-le avec la structure précédente et enregistrez la différence entre les deux. Vous pouvez consulter l'algorithme de comparaison ici.
3. Le DOM est ensuite mis à jour en fonction des différences enregistrées.
RéagirÉlément
1. « DOM » virtuel ;
2. L'essence est un objet immuable ;
Attribut type : s'il s'agit d'une chaîne telle que 'h1', elle représente un nœud DOM et son attribut props est destiné aux attributs du nœud DOM. Si l'attribut type est un composant qui représente.
fonction ou classe, il représente un composant ;
3. Les deux types de ReactElement peuvent être imbriqués l'un dans l'autre et mélangés pour décrire l'arborescence DOM ;