Warum kann man das DOM des Browsers nicht direkt verwenden?

Die direkte Verwendung des DOM des Browsers in modernen Frontend-Anwendungen, insbesondere in Bibliotheken wie React, ist aus mehreren Gründen nicht empfehlenswert:

• Leistung: Die Arbeit mit dem echten DOM ist langsamer, da Änderungen Neuberechnungen von Stilen, Neuzeichnungen und Neupositionierungen der Elemente auf der Seite verursachen.
• Komplexität der Zustandsverwaltung: Bei direkter Änderung des DOM ist es schwierig, den aktuellen Zustand der Benutzeroberfläche zu verfolgen und mit den Anwendungsdaten zu synchronisieren.
• Fehlende Optimierungen: React verwendet Virtual DOM, eine leichte Kopie des echten DOM, die es ermöglicht, minimale Änderungen effizient zu berechnen und sie auf einmal anzuwenden, wodurch die Anzahl der Operationen am echten DOM reduziert wird.

Daher dient das Virtual DOM als Zwischenschicht, die die Aktualisierungen der Oberfläche optimiert, die Leistung verbessert und die Entwicklung vereinfacht.

Beispiel: Bei einer Zustandsänderung eines React-Komponenten aktualisiert React zunächst das Virtual DOM, vergleicht es mit der vorherigen Version (Diffing) und wendet dann nur die notwendigen Änderungen am echten DOM an.