Die Verwendungsmöglichkeiten von React Virtual Dom: 1. Verbessern Sie die Leistung von React Code. Das Erstellen eines JS-Objekts erfordert viel weniger Leistung als das Erstellen eines echten DOM DOM wird eine enorme Leistungsverbesserung haben. 2. Um terminalübergreifende Anwendungen zu erreichen, wird das virtuelle DOM auf der Browserseite in einzelne Browser-DOM-Knoten umgewandelt, oder es kann in Komponenten nativer Anwendungen umgewandelt werden, um terminalübergreifende Anwendungen zu implementieren Anwendungen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
1. Deutlich verbesserte Leistung
2. Es ermöglicht Cross-End-Anwendungen (React Native). Auf der Browserseite wird das virtuelle DOM in einzelne Browser-DOM-Knoten umgewandelt. Es kann auch in Komponenten nativer Anwendungen umgewandelt und segmentübergreifende Anwendungen realisiert werden.
Warum es die Leistung verbessert
Wenn kein virtuelles DOM vorhanden ist, wird jedes Mal, wenn sich die Daten ändern, ein reales DOM erstellt, und dann wird das reale DOM verglichen und dann das reale DOM geändert DOM wird viel Leistung verbrauchen (Da der von JS generierte DOM-Baum die API auf Webanwendungsebene aufruft, ist der Leistungsverlust dieser API-Ebene sehr groß), was viel Leistung verbrauchen wird.
Beim virtuellen DOM ist das anders. Das Erstellen eines js-Objekts verbraucht viel weniger Leistung als das Erstellen eines echten DOM.
Virtuelles DOM
Virtual DOM ist ein js-Objekt
<div id='abc'><span>hello world</span></div>//Real DOM['div', {id: 'abc'}, ['span', {}, 'hello world' ]]//Virtuelles DOMSeitenlade- und Aktualisierungsprozess
1.Staatsdaten
2.jsx-Vorlage
3. Daten + Vorlage generieren virtuelles DOM
4. Verwenden Sie virtuelles DOM, um echtes DOM zu generieren
5. Zustandsänderungen
6. Daten + Vorlage generiert neues virtuelles DOM
7. Vergleichen Sie das ursprüngliche virtuelle DOM und das neue virtuelle DOM (Diff-Algorithmus).
8. Bedienen Sie das DOM direkt und wechseln Sie verschiedene Orte
Erweitern Sie Ihr Wissen:
Was ist der Zweck des virtuellen DOM?
Um eine effiziente Aktualisierung der DOM-Elemente auf der Seite zu erreichen;
In herkömmlichen Webanwendungen aktualisieren wir Datenänderungen an der Benutzeroberfläche häufig in Echtzeit, sodass jede kleine Datenänderung dazu führt, dass der DOM-Baum neu gerendert wird.
Der Zweck des virtuellen DOM besteht darin, alle Vorgänge zu akkumulieren, alle Änderungen statistisch zu berechnen und das DOM einheitlich zu aktualisieren.
Stark verbesserte Leistung
Es ermöglicht Cross-End-Anwendungen (React Native). Auf der Browserseite wird das virtuelle DOM in einzelne Browser-DOM-Knoten umgewandelt. Es kann auch in Komponenten nativer Anwendungen umgewandelt und segmentübergreifende Anwendungen realisiert werden.
Der Unterschied zwischen DOM und virtuellem DOM
1. Das virtuelle DOM führt keine Satz- und Neuzeichnungsvorgänge aus.
2. Ändern Sie häufig das virtuelle DOM, vergleichen und ändern Sie dann die Teile, die im realen DOM geändert werden müssen, auf einmal (Hinweis!), und führen Sie schließlich den Satz und das Neuzeichnen im realen DOM durch, um den Verlust des übermäßigen Satzes und Neuzeichnens zu verringern DOM-Knoten.
3. Die Effizienz des häufigen Setzens und Neuzeichnens des echten DOM ist recht gering.
4. Virtuelles DOM reduziert effektiv das Neuzeichnen und Setzen großer Bereiche (echte DOM-Knoten), da es sich letztendlich vom realen DOM unterscheidet und nur einen Teil davon rendern kann.