Ar React'e yra Shadow DOM ar tik Virtual DOM…

React numatytasis nustatymas naudoja Virtual DOM. Shadow DOM yra atskira technologija web komponentams.

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 koncepcijos 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' }); // Sukurti Shadow DOM
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Stilius inkapsuliuotas Shadow DOM */
        </style>
        <p>Šis tekstas yra Shadow DOM</p>
      `;
    }
  });
</script>

Pagrindiniai skirtumai:

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

Ar React'e yra Shadow DOM ar tik Virtual DOM?