Există Shadow DOM în React sau doar Virtual DOM?

În React, implicit, se utilizează Virtual DOM. Shadow DOM este o tehnologie separată a componentelor web.

React folosește Virtual DOM pentru a îmbunătăți performanța actualizării interfeței utilizatorului. În loc să manipuleze direct DOM-ul real la fiecare schimbare de stare, React creează o copie ușoară a DOM-ului în memorie (Virtual DOM). La schimbări, React compară Virtual DOM-ul actual cu cel anterior, găsește diferențele minime și actualizează doar părțile necesare ale DOM-ului real.

Shadow DOM, pe de altă parte, face parte din standardul componentelor web și este proiectat pentru a încapsula stilurile și structura în interiorul elementelor personalizate. Creează un arbore DOM separat, izolat de documentul principal.

Se poate folosi React împreună cu componente web care utilizează Shadow DOM, dar React, implicit, nu creează și nu folosește Shadow DOM pentru componentele sale.

// Exemplu de concept al Virtual DOM în React
// La schimbarea stării, React compară VDOM-ul
// și actualizează doar părțile modificate ale DOM-ului
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React va actualiza doar nodul de text cu numărul în DOM-ul real
  }

  render() {
    return (
      <div>
        <p>Contor: {this.state.count}</p> {/* Această parte a componentei va fi virtualizată */}
        <button onClick={() => this.increment()}>Crește</button>
      </div>
    );
  }
}

<!-- Exemplu de utilizare 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' }); // Creare Shadow DOM
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Stil încapsulat în Shadow DOM */
        </style>
        <p>Acest text este în Shadow DOM</p>
      `;
    }
  });
</script>

Principalele diferențe:

Caracteristică	Virtual DOM	Shadow DOM
Ce este?	Concept/model în memorie	Tehnologie reală a browserului
Scop	Optimizarea actualizării UI	Încapsularea stilurilor și structurii
Unde se folosește?	Framework-uri/Biblioteci (React, Vue)	Web componente
Cum funcționează?	Compararea arborilor în memorie	Crearea unui arbore DOM izolat