Was ist virtuelles DOM?

Kürzlich habe ich mir das Facebook- React- Framework angesehen. Es verwendet ein Konzept namens "Virtual DOM", das ich nicht wirklich verstanden habe.

Was ist das virtuelle DOM? Was sind die Vorteile?

React erstellt einen Baum mit benutzerdefinierten Objekten, die einen Teil des DOM darstellen. Anstatt ein tatsächliches DIV-Element zu erstellen, das ein UL-Element enthält, wird beispielsweise ein React.div-Objekt erstellt, das ein React.ul-Objekt enthält. Es kann diese Objekte sehr schnell bearbeiten, ohne das reale DOM zu berühren oder die DOM-API zu durchlaufen. Wenn eine Komponente gerendert wird, verwendet sie dieses virtuelle DOM, um herauszufinden, was mit dem realen DOM zu tun ist, damit die beiden Bäume übereinstimmen.

Sie können sich das virtuelle DOM wie eine Blaupause vorstellen. Es enthält alle Details, die zum Erstellen des DOM erforderlich sind. Da jedoch nicht alle Schwergewichtsteile eines echten DOM erforderlich sind, kann es viel einfacher erstellt und geändert werden.

Nehmen wir ein Beispiel - wenn auch ein sehr naives: Wenn Sie in einem Raum Ihres Hauses etwas durcheinander gebracht haben und es reinigen müssen, was ist Ihr erster Schritt? Reinigen Sie Ihr Zimmer, das durcheinander ist, oder das ganze Haus? Die Antwort ist definitiv, dass Sie nur den Raum reinigen, der gereinigt werden muss. Das macht das virtuelle DOM.

Gewöhnliches JS durchläuft oder rendert das gesamte DOM, anstatt nur den Teil zu rendern, für den Änderungen erforderlich sind.

Wenn Sie also Änderungen vornehmen, wie Sie <div>Ihrem DOM eine weitere hinzufügen möchten, wird das virtuelle DOM erstellt, das tatsächlich keine Änderungen am tatsächlichen DOM vornimmt. Mit diesem virtuellen DOM überprüfen Sie nun den Unterschied zwischen diesem und Ihrem aktuellen DOM. Und nur der Teil, der anders ist (in diesem Fall der neue <div>), wird hinzugefügt, anstatt das gesamte DOM neu zu rendern.

Was ist das virtuelle DOM?

Das virtuelle DOM ist eine speicherinterne Darstellung der realen DOM-Elemente, die von React-Komponenten generiert werden, bevor Änderungen an der Seite vorgenommen werden.

Dies ist ein Schritt zwischen der aufgerufenen Renderfunktion und der Anzeige von Elementen auf dem Bildschirm.

Die Rendermethode einer Komponente gibt ein gewisses Markup zurück, aber es ist noch nicht das endgültige HTML. Es ist die In-Memory-Darstellung dessen, was zu realen Elementen wird (dies ist Schritt 1). Diese Ausgabe wird dann in echtes HTML umgewandelt, das im Browser angezeigt wird (dies ist Schritt 2).

Warum also all dies durchgehen, um ein virtuelles DOM zu generieren? Einfache Antwort - Dies ermöglicht eine schnelle Reaktion. Dies geschieht mittels virtuellem DOM. Vergleichen Sie zwei virtuelle Bäume - alte und neue - und nehmen Sie nur die erforderlichen Änderungen am realen DOM vor.

Quelle aus dem Intro, um # 2 zu reagieren

A virtual DOM(VDOM) ist kein neues Konzept: https://github.com/Matt-Esch/virtual-dom .

VDOM ist strategisch so konzipiert, dass DOM aktualisiert wird, ohne alle Knoten in einer einzelnen Seitenanwendung neu zu zeichnen. Das Auffinden eines Knotens in einer Baumstruktur ist einfach, aber der DOM-Baum für eine SPA-App kann sehr groß sein. Das Finden und Aktualisieren eines Knotens / von Knoten im Falle eines Ereignisses ist nicht zeiteffizient.

VDOM löst dieses Problem, indem es eine High-Label-Abstraktion des tatsächlichen Dom erstellt. Das VDOM ist eine leichtgewichtige In-Memory-Baumdarstellung des tatsächlichen DOM auf hoher Ebene.

Ziehen Sie beispielsweise in Betracht, einen Knoten in DOM hinzuzufügen. Reagieren Halten Sie eine Kopie von VDOM im Speicher

1. Erstellen Sie ein VDOM mit einem neuen Status
2. Vergleichen Sie es mit älteren VDOM mit diffing.
3. Aktualisieren Sie nur verschiedene Knoten im realen DOM.
4. Weisen Sie ein neues VDOM einem älteren VDOM zu.

Dies ist eine kurze Beschreibung und Wiederholung des virtuellen DOM, das häufig neben ReactJS erwähnt wird.

Das DOM (Document Object Model) ist eine Abstraktion von strukturiertem Text, dh es besteht aus HTML-Code und CSS. Diese HTML-Elemente werden zu Knoten im DOM. Die vorherigen Methoden zur Bearbeitung des DOM unterliegen Einschränkungen. Virtual DOM ist eine Abstraktion des wörtlichen HTML-DOM, das lange vor der Erstellung oder Verwendung von React erstellt wurde. Für unsere Zwecke werden wir es jedoch zusammen mit ReactJS verwenden. Das virtuelle DOM ist leichtgewichtig und von der DOM-Implementierung im Browser getrennt. Das virtuelle DOM ist im Wesentlichen ein Screenshot (oder eine Kopie) des DOM zu einem bestimmten Zeitpunkt. Eine Sichtweise aus Entwicklersicht ist, dass das DOM die Produktionsumgebung und das virtuelle DOM die lokale (Entwicklungs-) Umgebung ist. Jedes Mal, wenn sich die Daten in einer React-App ändern, wird eine neue virtuelle DOM-Darstellung der Benutzeroberfläche erstellt.

Die grundlegendste Methode zum Erstellen einer statischen Komponente in ReactJS sind:

Sie müssen Code von der Rendermethode zurückgeben. Sie müssen jede Klasse in className konvertieren, da die Klasse in JavaScript ein reserviertes Wort ist. Abgesehen von den größeren Änderungen gibt es geringfügige Unterschiede zwischen den beiden DOMs, einschließlich drei Attributen, die im virtuellen DOM, jedoch nicht im HTML-DOM (key, ref und gefährlich SetInnerHTML) angezeigt werden.

Bei der Arbeit mit dem virtuellen DOM ist der Unterschied zwischen ReactElement und ReactComponent wichtig.

ReactElement

• Ein ReactElement ist eine leichte, zustandslose, unveränderliche, virtuelle Darstellung eines DOM-Elements.
• ReactElement - Dies ist der primäre Typ in React und befindet sich im virtuellen DOM.

• ReactElements können in HTML DOM gerendert werden

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSX kompiliert HTML-Tags in ReactElements

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

ReactComponent

• ReactComponent - ReactComponent sind zustandsbehaftete Komponenten.
• React.createClass wird als ReactComponent betrachtet.
• Bei jeder Statusänderung wird die Komponente erneut gerendert.

Wenn eine ReactComponent eine Statusänderung aufweist, möchten wir das HTML-DOM so wenig wie möglich ändern, damit ReactComponent in das ReactElement konvertiert wird, das dann schnell und einfach in das virtuelle DOM eingefügt, verglichen und aktualisiert werden kann.

Wenn React den Unterschied kennt, wird er in den Low-Level-Code (HTML-DOM) konvertiert, der im DOM ausgeführt wird.

Es ist ein ordentliches Konzept: Anstatt das DOM direkt zu manipulieren, was fehleranfällig ist und auf einem veränderlichen Status beruht, geben Sie stattdessen einen Wert aus, der als virtuelles DOM bezeichnet wird. Die virtuelle DOM wird dann diffed mit dem aktuellen Zustand des DOM, die eine Liste von DOM - Operationen erzeugt, die den aktuellen DOM aussehen wie die neue machen würde. Diese Vorgänge werden schnell in einem Stapel angewendet.

Von hier genommen.

Virtual DOM ist eine Abstraktion des HTML-DOM, mit der Teilbäume von Knoten basierend auf Statusänderungen selektiv gerendert werden. Es führt die geringstmögliche DOM-Manipulation durch, um Ihre Komponenten auf dem neuesten Stand zu halten.

Virtual Dom wird eine Kopie von Dom erstellt. Virtual Dom wird mit Dom verglichen, und Virtual Dom aktualisiert nur den Teil in Dom, der sich geändert hat. Es wird nicht der gesamte Dom gerendert, sondern nur der aktualisierte Teil von Dom in Dom geändert. Es ist sehr zeitaufwändig und dank dieser Funktionalität arbeitet unsere App schnell.

Alle Antworten sind großartig. Ich habe mir gerade eine Analogie ausgedacht, die wahrscheinlich eine reale Metapher liefern kann.

Das echte DOM ist wie Ihr Zimmer, Knoten sind die Möbel in Ihrem Zimmer. Das virtuelle DOM ist so, als würden wir eine Blaupause dieses aktuellen Raums zeichnen.

Wir alle haben die Erfahrung, Möbel zu bewegen, es ist sehr anstrengend (das gleiche Konzept wie das Aktualisieren von Ansichten in Computern). Wenn wir also die Position ändern / Möbel (Knoten) hinzufügen möchten, möchten wir daher nur die sehr notwendige Änderung vornehmen.

Blaupause kam für die Rettung, um es zu erreichen. Wir zeichnen eine neue Blaupause und vergleichen den Unterschied mit der ursprünglichen. Dadurch erfahren wir, welches Teil geändert wurde und welches Teil gleich bleibt. Wir nehmen dann die notwendige Änderung am realen Raum vor (aktualisieren Sie die geänderten Knoten im realen DOM). Hurra.

(Einige denken vielleicht, warum müssen wir uns auf das virtuelle verlassen und das reale DOM nicht direkt vergleichen? In der Analogie bedeutet der Vergleich des realen DOM, dass Sie einen anderen realen Raum erstellen und ihn mit Ihrem ursprünglichen vergleichen müssen Es ist einfach zu teuer.)

Lassen Sie uns in dieser Angelegenheit Ordnung und Sinn machen. React (oder eine andere Bibliothek) ist eine "Ebene" in Javascript.

Es gibt kein virtuelles Dom, es gibt kein gebundenes Dom.

Lassen Sie mich in einfachem Javascript erklären:

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

Zu diesem Zeitpunkt haben wir ein Div erstellt, das auf dem Dom nicht angezeigt wird, da es nicht angehängt ist

aber wir können darauf zugreifen, Attribute, Werte hinzufügen, ändern usw.

Sobald wir anrufen: (zum Beispiel, füge es dem Körper hinzu)

    document.body.appendChild(vDom['newDiv'])

dann werden wir es sehen;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)