Vai React ir Shadow DOM vai tikai Virtual DOM?

React pēc noklusējuma izmanto Virtual DOM. Shadow DOM ir atsevišķa web komponentu tehnoloģija.

React izmanto Virtual DOM, lai uzlabotu lietotāja saskarnes atjaunināšanas veiktspēju. Tā vietā, lai tieši manipulētu ar reālo DOM katru reizi, kad mainās stāvoklis, React izveido vieglu DOM kopiju atmiņā (Virtual DOM). Mainoties, React salīdzina pašreizējo Virtual DOM ar iepriekšējo, atrod minimālās atšķirības un atjaunina tikai nepieciešamās reāla DOM daļas.

Shadow DOM, gluži pretēji, ir web komponentu standarta daļa un paredzēts stilu un struktūras inkapsulācijai, kas atrodas lietotāja elementu iekšienē. Tas izveido atsevišķu DOM koku, kas ir izolēts no galvenā dokumenta.

React var izmantot kopā ar web komponentiem, kas izmanto Shadow DOM, bet pats React pēc noklusējuma neizveido un neizmanto Shadow DOM saviem komponentiem.

// Piemērs Virtual DOM koncepcijai React
// Kad stāvoklis mainās, React salīdzina VDOM
// un atjaunina tikai mainītās DOM daļas
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React atjauninās tikai teksta mezglu ar skaitli reālajā DOM
  }

  render() {
    return (
      <div>
        <p>Skaitītājs: {this.state.count}</p> {/* Šī daļa tiks virtualizēta */}
        <button onClick={() => this.increment()}>Palielināt</button>
      </div>
    );
  }
}

<!-- Piemērs, kā izmantot 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 izveide
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Stils ir inkapsulēts Shadow DOM */
        </style>
        <p>Šis teksts ir Shadow DOM</p>
      `;
    }
  });
</script>

Galvenās atšķirības:

Īpašība	Virtual DOM	Shadow DOM
Kas tas ir?	Koncepcija/modeļa atmiņā	Reāla pārlūkprogrammas tehnoloģija
Mērķis	UI atjauninājumu optimizācija	Stilu un struktūras inkapsulācija
Kur tiek izmantots?	Frameworks/bibliotēkas (React, Vue)	Web komponenti
Kā darbojas?	Salīdzina kokus atmiņā	Izveido izolētu DOM koku