Kas Reactis on Shadow DOM või ainult Virtual DOM?

React vaikų numatytasis naudojamas Virtual DOM. Shadow DOM yra atskira web komponentų technologija.

React naudoja Virtual DOM, kad pagerintų vartotojo sąsajos atnaujinimo efektyvumą. Vietoj tiesioginio realaus DOM manipuliavimo kiekvieną kartą keičiant būseną, React sukuria lengvą kopiją DOM atmintyje (Virtual DOM). Keičiantis, React lygina dabartinį Virtual DOM su ankstesniu, suranda minimalias skirtumus ir atnaujina tik būtinus realaus DOM dalis.

Shadow DOM, priešingai, yra standartinės web komponentų dalis ir skirtas stilių bei struktūros inkapsuliacijai, esančiai vartotojo elementų viduje. Jis sukuria atskirą DOM medį, izoliuotą nuo pagrindinio dokumento.

React gali būti naudojamas kartu su web komponentais, kurie naudoja Shadow DOM, tačiau pats React pagal numatytuosius nustatymus nesukuria ir nenaudoja Shadow DOM savo komponentuose.

// Pavyzdys Virtual DOM koncepcijai React'e
// Kai būsenos keičiasi, React lygina VDOM
// ir atnaujina tik pasikeitusius DOM dalis
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React atnaujins tik tekstinį mazgą su skaičiumi realiame DOM
  }

  render() {
    return (
      <div>
        <p>Skaitiklis: {this.state.count}</p> {/* Ši dalis bus virtualizuota */}
        <button onClick={() => this.increment()}>Padidinti</button>
      </div>
    );
  }
}

<!-- Pavyzdys naudojant 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 sukūrimas
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Stilius inkapsuliuotas Shadow DOM */
        </style>
        <p>Šis tekstas Shadow DOM</p>
      `;
    }
  });
</script>

Pagrindinės skirtumai:

Savybė	Virtual DOM	Shadow DOM
Kas tai?	Koncepcija/patentas atmintyje	Reali naršyklės technologija
Tikslas	UI atnaujinimų optimizavimas	Stilių ir struktūros inkapsuliacija
Kur naudojama?	Frameworks/bibliotėkos (React, Vue)	Web komponentai
Kaip veikia?	Lygina medžius atmintyje	Sukuria izoliuotą DOM medį