Bestaat Shadow DOM in React of alleen Virtual DOM?

In React wordt standaard Virtual DOM gebruikt. Shadow DOM is een aparte technologie voor webcomponenten.

React gebruikt Virtual DOM om de prestaties van het bijwerken van de gebruikersinterface te verbeteren. In plaats van direct te manipuleren met de echte DOM bij elke statuswijziging, maakt React een lichte kopie van de DOM in het geheugen (Virtual DOM). Bij wijzigingen vergelijkt React de huidige Virtual DOM met de vorige, vindt de minimale verschillen en werkt alleen de benodigde delen van de echte DOM bij.

Shadow DOM is daarentegen een onderdeel van de standaard webcomponenten en is ontworpen om stijlen en structuur te encapsuleren binnen aangepaste elementen. Het creëert een gescheiden DOM-boom, geïsoleerd van het hoofddocument.

React kan samen met webcomponenten die Shadow DOM gebruiken, maar React zelf creëert of gebruikt standaard geen Shadow DOM voor zijn componenten.

// Voorbeeld van het concept van Virtual DOM in React
// Bij statuswijziging vergelijkt React de VDOM
// en werkt alleen de gewijzigde delen van de DOM bij
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React zal alleen de tekstknoop met het nummer in de echte DOM bijwerken
  }

  render() {
    return (
      <div>
        <p>Counter: {this.state.count}</p> {/* Dit deel van de component wordt gevirtualiseerd */}
        <button onClick={() => this.increment()}>Verhoog</button>
      </div>
    );
  }
}

<!-- Voorbeeld van het gebruik van 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 creëren
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Stijl ingekapseld in Shadow DOM */
        </style>
        <p>Deze tekst bevindt zich in Shadow DOM</p>
      `;
    }
  });
</script>

Belangrijkste verschillen:

Kenmerk	Virtual DOM	Shadow DOM
Wat is het?	Concept/patroon in geheugen	Reële browsertechnologie
Doel	UI-update optimalisatie	Stijl- en structuurencapsulatie
Waar wordt het gebruikt?	Frameworks/Bibliotheken (React, Vue)	Web componenten
Hoe werkt het?	Vergelijking van bomen in geheugen	Creëren van een geïsoleerde DOM-boom