Virtuelles DOM: Technik hinter den schnellen DOM-Updates von React.

Hallo zusammen, ich freue mich, eine neue Beitragsreihe zu starten, in der ich versuchen werde, verschiedene Konzepte aus der Programmierwelt zu erklären. Wir werden alles abdecken, von Begriffen wie idempotent und idiomatisch bis hin zu spezifischeren Konzepten im Zusammenhang mit Bibliotheken und Frameworks. Und heute befassen wir uns mit einem solchen Thema – Virtuelles DOM.

Wenn Sie dies hilfreich finden, vergessen Sie nicht, zu liken, zu teilen und zu kommentieren, welche Themen ich als nächstes behandeln soll. Verschwenden wir keine Zeit mehr und springen wir direkt in das Virtual DOM!

HINWEIS: Bevor wir fortfahren, ist es wichtig zu verstehen, dass das Konzept eines virtuellen DOM nicht nur für React gilt. Andere JavaScript-Frontend-Bibliotheken wie Vue nutzen es ebenfalls, um die Rendering-Leistung zu verbessern.

DOM

Das DOM (Document Object Model) ist eine baumartige Darstellung eines HTML-Dokuments (oder einer Webseite/Webanwendung) unter Verwendung von Knoten oder Objekten. Das DOM wurde so konzipiert, dass Frontend-Bibliotheken und Frameworks (Javascript) über seine API programmgesteuert mit dem Dokument interagieren und es bearbeiten können.

Warum virtuelles DOM

Während das DOM über seine API eine effiziente Möglichkeit bietet, ein Dokument zu bearbeiten, kann die Leistung zu einem Problem werden, wenn Tausende von Elementen auf dem Bildschirm angezeigt werden. Dies liegt daran, dass Updates im DOM oft die Zerstörung und Neuerstellung ganzer Teilbäume beinhalten.

Hier kommt das Virtuelle DOM ins Spiel. Das virtuelle DOM ist eine leichte, speicherinterne Darstellung des realen DOM und ermöglicht eine schnelle und effiziente Synchronisierung von Änderungen am tatsächlichen DOM – ein Prozess, der als Abstimmung

bekannt ist

Die wichtigsten Dinge, an die Sie sich hier erinnern sollten, sind:

1. Das virtuelle DOM ist eine leichtgewichtige Version des realen DOM, was bedeutet, dass es nicht über alle Eigenschaften des realen DOM verfügt, was die Arbeit effizienter macht.
2. Das virtuelle DOM existiert im Speicher, was eine schnellere und effizientere Bearbeitung ermöglicht, bevor die Änderungen auf das reale DOM angewendet werden.

Vor diesem Hintergrund erstellen JavaScript-Bibliotheken, die die DOM-API verwenden, ihr eigenes virtuelles DOM und bearbeiten es. Sie aktualisieren das Real DOM nur bei Bedarf und selbst dann mit minimalen Vorgängen.

Wie wird virtuelles DOM in React gehandhabt?

React JS ist eine beliebte Bibliothek, die von Facebook zum Erstellen von Benutzeroberflächen entwickelt wurde. Aufgrund seiner Einfachheit erfreut es sich großer Beliebtheit und wird in vielen modernen Webprojekten verwendet.

Wie viele andere JS-Frontend-Bibliotheken nutzt React das Konzept eines virtuellen DOM, um Neu-Renderings und Aktualisierungen in einer Anwendung effizient zu verwalten.

React verwendet einen Diffing-Algorithmus zusammen mit einer Abgleichstechnik, um diesen Prozess zu optimieren. (Konkret erledigt dies die ReactDOM-Bibliothek im Hintergrund.)

Lass es uns Schritt für Schritt aufschlüsseln:

1. Funktion render() der React-Komponente

   • Die render()-Funktion der React-Komponente erstellt zunächst das React Element/Virtual DOM mit dem JSX.
   • Es enthält eine schlanke Version des Real DOM-Gegenstücks und zusätzliche Eigenschaften wie $$typeof, props, um eine effiziente Differenzierung zu ermöglichen.

2. Diffing-Algorithmus

   • Immer wenn eine React-Komponente aktualisiert wird, wird ein neues virtuelles DOM erstellt und der Diffing-Prozess beginnt. Dies ist ein O(n)-heuristischer Algorithmus, der auf zwei Schlüsselannahmen basiert.
     1. Verschiedene Arten von Elementen erzeugen unterschiedliche Bäume.
     2. Eine Schlüsselstütze kann verwendet werden, um zu verfolgen, welche untergeordneten Elemente zwischen Renderings konsistent bleiben.

2.1. Schritte im Differenzalgorithmus

• Wenn der Algorithmus auf zwei verschiedene Arten von DOM-Elementen trifft, reißt er das alte virtuelle DOM ab und erstellt ein neues, basierend auf den Spezifikationen des neuen Elements.
• Wenn React auf gleiche Typen von DOM-Elementen trifft, behält es das alte DOM-Objekt bei und aktualisiert nur die geänderten Attribute.
• Für React-Elemente desselben Typs behält React das alte DOM-Objekt bei und stellt aktualisierte Requisiten bereit.
• Beim Umgang mit untergeordneten Elementen durchläuft React beide Sätze von untergeordneten Elementen (alter virtueller DOM-Baum und neu erstellter Baum) und nimmt Aktualisierungen vor, wenn Unterschiede bestehen.

2.2. Warum Schlüssel verwenden?

Wie im letzten Punkt erwähnt, durchläuft der Diffing-Algorithmus die untergeordneten Listen und nimmt bei Bedarf Änderungen vor. Wenn Sie in einer Liste mit untergeordneten Elementen keine Schlüssel verwenden, kann die Leistung beeinträchtigt werden und es kann zu unerwartetem Verhalten kommen.

Sehen wir uns das Beispiel an:

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

Im obigen Szenario kann der Algorithmus die Änderung tatsächlich effizient verarbeiten. Es untersucht jedes untergeordnete Indexelement und findet

apple

&&

Ananas

ist in beiden Listen gleich und hat keine Auswirkung auf sie, während

grape

ist nur in der neuen Liste vorhanden und fügt daher eine zur alten Liste hinzu.

Aber sagen wir, wir möchten die

Traube

hinzufügen. am Anfang.

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

Hier nimmt die Leistung des Algorithmus ab, da er

grape

Anstelle von

apple

wird

apple

Anstelle von

Ananas

und eine neue

Ananas

an letzter Stelle. Dadurch werden alle Elemente von strach neu erstellt.

Um diesen Leistungsengpass zu beheben, verwendet das React-Team den Schlüssel, eine eindeutige ID, die an die untergeordneten Listenelemente angehängt wird und vom Algorithmus verwendet werden kann, um zu bestimmen, ob das Element intakt bleiben kann und Ordnen Sie einfach die Position neu an oder muss neu erstellt werden.

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>grape</li>
  <li>apple</li>
  <li>pineapple</li>
</ul>

Jetzt kann React die Schlüsselattribute verwenden und nur die nicht aktualisierten untergeordneten Elemente neu positionieren, während das neue untergeordnete Element hinzugefügt wird.

3) ReactDOMs render()-Funktion

Abschließend wird die Funktion render() des ReactDOM aufgerufen, die die Unterschiede zwischen dem neuen virtuellen DOM und dem realen DOM ausgleicht. Dies führt dazu, dass nur minimale Vorgänge erforderlich sind, um den HTML-Code effizient neu zu rendern.

Abschluss

In diesem Artikel haben wir das virtuelle DOM untersucht, eine Technik, die von vielen Frontend-Bibliotheken verwendet wird, um Daten- und Elementänderungen effizient mit minimalen DOM-Operationen zu verarbeiten. Wir haben uns auch angeschaut, wie React speziell einen Vergleichs- und Abgleichsprozess nutzt, um Updates zu optimieren.

Ich hoffe, dieser Beitrag hat Ihnen geholfen, die Funktionsweise des Virtual DOM besser zu verstehen. Selbst wenn Sie mit dem Konzept vertraut waren, hoffe ich, dass Sie Jetzt wissen, was Virtual DOM ist und wie es zur Erstellung einer optimierten Frontend-Umgebung beiträgt.

Das obige ist der detaillierte Inhalt vonVirtuelles DOM: Technik hinter den schnellen DOM-Updates von React.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!