Was ist der Unterschied zwischen React und dem Diff-Algorithmus von Vue?

Unterschied: 1. Wenn der Knotenelementtyp derselbe, aber der Klassenname unterschiedlich ist, betrachtet Vue ihn als einen anderen Elementtyp und löscht und erstellt ihn neu, während React ihn als denselben Knotentyp betrachtet und ändern Sie nur die Knotenattribute. 2. Für den Listenvergleich verwendet Vue die Vergleichsmethode von beiden Enden zur Mitte, während React die Vergleichsmethode von links nach rechts verwendet.

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

Was ist der Unterschied zwischen dem Diff-Algorithmus von React und Vue?

Bevor wir über den Diff-Algorithmus sprechen, wollen wir zunächst das virtuelle DOM verstehen:

Das virtuelle DOM behält nur einige grundlegende Attribute der realen DOM-Knoten und der Hierarchie bei Die Beziehung zwischen den Knoten entspricht einer „Caching“-Ebene zwischen Javascript und DOM.

Virtuelles DOM verwendet tatsächlich ein Objekt, um das DOM zu beschreiben. Durch den Vergleich der Unterschiede zwischen den beiden Objekten vor und nach werden schließlich nur die geänderten Teile neu gerendert, um die Rendereffizienz zu verbessern.

Was ist ein Diff-Algorithmus?

React muss zwei virtuelle DOM-Bäume gleichzeitig verwalten: Einer stellt die aktuelle DOM-Struktur dar und der andere wird generiert, wenn sich der React-Status ändert und gerade neu gerendert wird. React vergleicht die Unterschiede zwischen den beiden Bäumen, um festzustellen, ob die DOM-Struktur geändert werden muss und wie sie geändert werden kann.

Einfach ausgedrückt ist der Diff-Algorithmus auf dem virtuellen DOM implementiert. Er ist ein Beschleuniger des virtuellen DOM und eine magische Waffe zur Verbesserung der Leistung.

Ursprünglicher Diff-Algorithmus

Der ursprüngliche Diff-Algorithmus ist eigentlich ein Vergleich der Durchlaufschleife. Um es einfach auszudrücken: Zuerst müssen Sie verstehen, was der Diff-Algorithmus ist. Und dann wissen Sie, wie der Diff-Algorithmus von React optimiert wird. Der ursprüngliche Diff-Algorithmus besteht darin, zwei virtuelle Dom-Bäume einzeln zu vergleichen, und er ist nicht hierarchisch. Mit anderen Worten, wenn es sich um einen virtuellen Dom-Baum handelt, beginnend mit der Wurzel Knoten zu In Zukunft muss jeder Knoten des Zweigs herausgenommen und mit dem neu generierten Knoten verglichen werden. Die zeitliche Komplexität dieses Diff-Algorithmus beträgt O(n ^3). es ist (n ^ 2), denn wenn wir jedes mit dem anderen n vergleichen, muss der Vergleich nach n^2 Malen abgeschlossen sein, aber tatsächlich ist dies nicht der Fall. Nach dem Vergleich müssen wir noch berechnen, wie wir das platzieren sollen Am besten an der optimalen Stelle, also ist es O(n ^3). Aus algorithmischer Sicht löst der ursprüngliche Diff-Algorithmus funktionell die Notwendigkeit, zuerst das tatsächliche DOM zu vergleichen, aber tatsächlich wird unser Prozess Komplexer und ungeschickter

Optimierter Diff-Algorithmus

Tatsächlich möchte ich hier sagen, dass der Diff-Algorithmus von Vue und React beide optimierte Diff-Algorithmen sind und den gleichen Optimierungspunkt haben, nämlich den Vergleich gleiche Ebenen, kein ebenenübergreifender Vergleich

ist, dass unsere Analyse feststellen kann, dass in der tatsächlichen Webanzeige die Bewegung von Nicht-Geschwisterknoten sehr gering ist, daher haben wir uns für einen Geschwistervergleich entschieden

Die Erklärung des Geschwistervergleichs lautet: Es werden nur Knoten auf derselben Ebene verglichen. Für verschiedene Ebenen müssen Sie nur den ursprünglichen Knoten löschen und einen neuen aktualisierten Knoten einfügen. Dies ist ein Bild, das ich im Internet gesehen habe. Wenn es einen Verstoß gibt, kontaktieren Sie mich bitte Einfach ausgedrückt ist die Baumstruktur wie im Bild gezeigt, sodass die alte und die neue Baumstruktur verglichen werden können. Nach dem Vergleich werden tatsächliche DOM-Operationen durchgeführt, was den gesamten Reflow reduziert oder Neuzeichnen durch Ändern der Daten

Vue und Der Unterschied zwischen dem Diff-Algorithmus in React

vue und der Diff-Algorithmus von React ignorieren beide Ebenenvergleiche und führen nur Vergleiche auf derselben Ebene durch. Die Patch-Funktion wird während vue diff aufgerufen. Die Parameter sind vnode und oldVnode, die den alten bzw. neuen Knoten darstellen.

vue vergleicht Knoten. Wenn die Knotenelementtypen gleich sind, der Klassenname jedoch unterschiedlich ist, werden sie als unterschiedliche Elementtypen betrachtet und von React als Knoten desselben Typs betrachtet Attribute. vue vergleicht Listen mithilfe der beiden Elemente. Die Vergleichsmethode erfolgt vom Ende zur Mitte, während React die Vergleichsmethode von links nach rechts verwendet. Wenn eine Sammlung nur den letzten Knoten zum ersten verschiebt, verschiebt React die vorherigen Knoten der Reihe nach, während Vue nur den letzten Knoten zum ersten verschiebt. Im Allgemeinen ist die Vergleichsmethode von vue effizienter.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen React und dem Diff-Algorithmus von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!