Gibt es Shadow DOM in React oder nur Virtual DOM?

In React wird standardmäßig Virtual DOM verwendet. Shadow DOM ist eine separate Web-Komponententechnologie.

React nutzt den Virtual DOM, um die Leistung bei der Aktualisierung der Benutzeroberfläche zu verbessern. Anstatt bei jeder Zustandsänderung direkt mit dem echten DOM zu manipulieren, erstellt React eine leichte Kopie des DOM im Speicher (Virtual DOM). Bei Änderungen vergleicht React den aktuellen Virtual DOM mit dem vorherigen, findet die minimalen Unterschiede und aktualisiert nur die notwendigen Teile des echten DOM.

Shadow DOM ist hingegen ein Teil des Web-Komponentenstandards und dient der Kapselung von Stilen und Struktur innerhalb benutzerdefinierter Elemente. Es erstellt einen separaten DOM-Baum, der vom Hauptdokument isoliert ist.

React kann zusammen mit Web-Komponenten verwendet werden, die Shadow DOM nutzen, aber React selbst erstellt oder verwendet standardmäßig kein Shadow DOM für seine Komponenten.

// Beispiel für das Konzept des Virtual DOM in React
// Bei Zustandsänderungen vergleicht React den VDOM
// und aktualisiert nur die geänderten Teile des DOM
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React aktualisiert nur den Textknoten mit der Zahl im echten DOM
  }

  render() {
    return (
      <div>
        <p>Zähler: {this.state.count}</p> {/* Dieser Teil der Komponente wird virtualisiert */}
        <button onClick={() => this.increment()}>Erhöhen</button>
      </div>
    );
  }
}

<!-- Beispiel für die Verwendung von Shadow DOM -->
<my-custom-element></my-custom-element>

<script>
  customElements.define('my-custom-element', class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' }); // Shadow DOM erstellen
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Stil im Shadow DOM gekapselt */
        </style>
        <p>Dieser Text befindet sich im Shadow DOM</p>
      `;
    }
  });
</script>

Hauptunterschiede:

Merkmal	Virtual DOM	Shadow DOM
Was ist das?	Konzept/Muster im Speicher	Reale Browsertechnologie
Zweck	UI-Update-Optimierung	Stil- und Strukturinkapselung
Wo wird es verwendet?	Frameworks/Bibliotheken (React, Vue)	Web-Komponenten
Wie funktioniert es?	Baumvergleiche im Speicher	Erstellung eines isolierten DOM-Baums