Existuje Shadow DOM v React alebo len Virtual DOM?

V React sa predvoleným nastavením sa používa Virtual DOM. Shadow DOM je samostatná technológia webových komponentov.

React používa Virtual DOM na zvýšenie výkonu aktualizácie používateľského rozhrania. Namiesto priamej manipulácie s reálnym DOM pri každej zmene stavu React vytvára ľahkú kópiu DOM v pamäti (Virtual DOM). Pri zmenách React porovnáva aktuálny Virtual DOM s predchádzajúcim, nájde minimálne rozdiely a aktualizuje iba potrebné časti reálneho DOM.

Shadow DOM je naopak súčasťou štandardu webových komponentov a je určený na inkapsuláciu štýlov a štruktúry vnútri vlastných prvkov. Vytvára samostatné DOM strom, izolované od hlavného dokumentu.

React možno použiť spolu s webovými komponentmi, ktoré používajú Shadow DOM, ale sám React predvolene nevytvára a nevyužíva Shadow DOM pre svoje komponenty.

// Príklad konceptu Virtual DOM v React
// Pri zmene stavu React porovnáva VDOM
// a aktualizuje iba zmenené časti DOM
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React aktualizuje iba textový uzol s číslom v reálnom DOM
  }

  render() {
    return (
      <div>
        <p>Počítadlo: {this.state.count}</p> {/* Táto časť komponentu bude virtualizovaná */}
        <button onClick={() => this.increment()}>Zvýšiť</button>
      </div>
    );
  }
}

<!-- Príklad použitia 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' }); // Vytvorenie Shadow DOM
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Štýl je inkapsulovaný v Shadow DOM */
        </style>
        <p>Tento text je v Shadow DOM</p>
      `;
    }
  });
</script>

Hlavné rozdiely:

Charakteristika	Virtual DOM	Shadow DOM
Čo je?	Koncepcia/vzor v pamäti	Reálna technológia prehliadača
Účel	Optimalizácia aktualizácií UI	Inkapsulácia štýlov a štruktúry
Kde sa používa?	Frameworky/Knižnice (React, Vue)	Webové komponenty
Ako funguje?	Porovnávanie stromov v pamäti	Vytváranie izolovaného DOM stromu