Was nützt React Virtual Dom?

Verwendung 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 Virtuelles DOM wird helfen Große Leistungsverbesserung; 2. Um Cross-End-Anwendungen zu erreichen, wird das virtuelle DOM auf der Browserseite in einzelne Browser-DOM-Knoten konvertiert, oder es kann in Komponenten nativer Anwendungen umgewandelt werden, um Cross-End-Anwendungen zu implementieren.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Wozu dient React Virtual Dom?1 Verbessert die Leistung erheblich

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 verbessern kann

Wenn kein virtuelles DOM vorhanden ist, wird jedes Mal, wenn sich die Daten ändern, ein echtes DOM erstellt und dann mit dem realen DOM verglichen Dann wird das echte DOM geändert, was viel Leistung erfordert (da JS beim Generieren eines DOM-Baums APIs auf Webanwendungsebene aufruft und der Leistungsverlust dieser API-Ebene sehr groß ist), was a verbraucht viel Leistung.

Bei virtuellem DOM ist es anders. Das Erstellen eines js-Objekts verbraucht viel weniger Leistung als das Erstellen eines echten DOM. Virtuelles DOM Virtuelles DOM zum Generieren echter DOM

6. Daten + Vorlage generiert neues virtuelles DOM (Diff-Algorithmus)

8

Wissen erweitern:

Was ist der Zweck von Virtual 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 sich der DOM-Baum ändert -machen.

Der Zweck des virtuellen DOM besteht darin, alle Vorgänge zu akkumulieren, alle Änderungen statistisch zu berechnen und das DOM einheitlich zu aktualisieren.

Verbessert die Leistung erheblich

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 eine Komponente einer nativen Anwendung umgewandelt und eine segmentübergreifende Anwendung realisiert werden.

Der Unterschied zwischen DOM und virtuellem DOM

1. Das virtuelle DOM führt keine Schriftsatz- und Neuzeichnungsvorgänge durch. 2. Das virtuelle DOM wird häufig geändert und vergleicht und modifiziert dann die Teile, die im realen DOM geändert werden müssen auf einmal (Hinweis!) und schließlich den Satz und das Neuzeichnen im realen DOM durchführen, um den Verlust des übermäßigen Satzes und Neuzeichnens des DOM-Knotens zu reduzieren.

3 Die Effizienz des häufigen Satzes und Neuzeichnens des echten DOM ist recht gering . Das virtuelle DOM reduziert effektiv das Neuzeichnen und Setzen des Bereichs (echte DOM-Knoten), da der endgültige Vergleich mit dem realen DOM anders ist und Sie nur einen Teil davon rendern können. [Verwandte Empfehlungen: Javascript-Video-Tutorial,

Web-Frontend

]

Das obige ist der detaillierte Inhalt vonWas nützt React Virtual Dom?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!