Czy w React istnieje Shadow DOM, czy tylko Virtual…

Domyślnie React używa Virtual DOM. Shadow DOM jest odrębną technologią komponentów internetowych.

React korzysta z Virtual DOM, aby zwiększyć wydajność aktualizacji interfejsu użytkownika. Zamiast bezpośrednio manipulować rzeczywistym DOM przy każdej zmianie stanu, React tworzy lekką kopię DOM w pamięci (Virtual DOM). Przy zmianach React porównuje aktualny Virtual DOM z poprzednim, znajduje minimalne różnice i aktualizuje tylko te części rzeczywistego DOM, które tego wymagają.

Shadow DOM, z drugiej strony, jest częścią standardu web components i służy do enkapsulacji stylów i struktury wewnątrz elementów niestandardowych. Tworzy odizolowane drzewo DOM, oddzielone od głównego dokumentu.

Można używać React razem z web components korzystającymi z Shadow DOM, ale React domyślnie nie tworzy ani nie używa Shadow DOM dla swoich komponentów.

// Przykład koncepcji Virtual DOM w React
// Przy zmianie stanu React porównuje VDOM
// i aktualizuje tylko zmienione części DOM
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React zaktualizuje tylko tekstowy węzeł z liczbą w rzeczywistym DOM
  }

  render() {
    return (
      <div>
        <p>Licznik: {this.state.count}</p> {/* Ta część komponentu będzie wirtualizowana */}
        <button onClick={() => this.increment()}>Zwiększ</button>
      </div>
    );
  }
}

<!-- Przykład użycia 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' }); // Tworzenie Shadow DOM
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Styl enkapsulowany w Shadow DOM */
        </style>
        <p>Ten tekst jest w Shadow DOM</p>
      `;
    }
  });
</script>

Główne różnice:

Cecha	Virtual DOM	Shadow DOM
Co to jest?	Koncepcja/modele w pamięci	Rzeczywista technologia przeglądarki
Cel	Optymalizacja aktualizacji UI	Enkapsulacja stylów i struktury
Gdzie jest używany?	Frameworki/Biblioteki (React, Vue)	Web components
Jak działa?	Porównanie drzew w pamięci	Tworzenie odizolowanego drzewa DOM

Czy w React istnieje Shadow DOM, czy tylko Virtual DOM?