In React ist Element die kleinste Baueinheit, ein Objekt, kein DOM; Element kann mit jsx definiert werden, und die Syntax lautet „const element =...“; Element kann nach seiner Erstellung nicht geändert werden Wenn Sie das DOM ändern möchten, können Sie nur ein neues Element erstellen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Element
1.Element ist die kleinste Baueinheit in React. Es handelt sich um ein Objekt, nicht um ein DOM, und die Erstellungskosten sind relativ gering.
(1) Normalerweise verwenden wir JSX, um ein Element im Code zu definieren:
const element = <h1>Hallo Welt</h1>;(2) Verwenden Sie zum Rendern ReactDOM.render
ReactDOM.render( element, document.getElementById('root') );2. Sobald ein Element erstellt wurde, kann es nicht mehr geändert werden. Es ist wie ein Bild in einem Film. Wenn Sie die Anzeige des DOM ändern möchten, können Sie nur ein neues Element erstellen.
3. React vergleicht die beiden Elemente vorher und nachher und aktualisiert nur den Inhalt, der aktualisiert werden muss.
Erweitern Sie Ihr Wissen:
Virtuelles DOM
1. React erstellt DOM-Elemente nicht direkt, sondern erstellt Objekte, die der DOM-Struktur ähneln. Anschließend wird das eigentliche DOM basierend auf dieser Struktur gerendert, nämlich dem React DOM.
2. Wenn es eine Änderung gibt, erstellen Sie ein neues Objekt, vergleichen Sie es mit der vorherigen Struktur und notieren Sie den Unterschied zwischen den beiden. Sie können sich den Diff-Algorithmus hier ansehen.
3. Das DOM wird dann basierend auf den aufgezeichneten Unterschieden aktualisiert.
ReactElement
1. Virtuelles „DOM“;
2. Die Essenz ist ein unveränderliches Objekt;
Typattribut: Wenn es sich um eine Zeichenfolge wie „h1“ handelt, stellt es einen DOM-Knoten dar, und sein Props-Attribut ist für die Attribute des DOM-Knotens, wenn das Typattribut eine Komponente darstellt
Funktion oder Klasse, es stellt eine Komponente dar;
3. Die beiden Arten von ReactElement können ineinander verschachtelt und miteinander gemischt werden, um den DOM-Baum zu beschreiben.