Létezik Shadow DOM a React-ben vagy csak Virtual DOM?

A React alapértelmezés szerint a Virtual DOM-ot használja. A Shadow DOM külön technológia a webkomponensek számára.

A React a Virtual DOM-ot használja a felhasználói felület frissítésének teljesítményének növelése érdekében. Minden állapotváltozásnál a React összehasonlítja a jelenlegi Virtual DOM-ot az előzővel, megtalálja a minimális különbségeket, és csak a szükséges részeket frissíti a valódi DOM-ban.

A Shadow DOM ezzel szemben a webkomponensek szabványának része, és célja a stílusok és szerkezetek inkapszulálása a felhasználói elemek belsejében. Egy különálló DOM-fát hoz létre, amely elszigetelt a fő dokumentumtól.

A React használható Shadow DOM-ot alkalmazó webkomponensekkel együtt, de alapértelmezés szerint a React nem hoz létre vagy használ Shadow DOM-ot a saját komponenseihez.

// A Virtual DOM koncepció példája React-ben
// Állapotváltozás esetén a React összehasonlítja a VDOM-ot
// és csak a módosított DOM részeket frissíti
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // A React csak a számot tartalmazó szövegcsomópontot frissíti a valódi DOM-ban
  }

  render() {
    return (
      <div>
        <p>Számláló: {this.state.count}</p> {/* Ez a rész virtualizálva lesz */}
        <button onClick={() => this.increment()}>Növel</button>
      </div>
    );
  }
}

<!-- Shadow DOM használatának példája -->
<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 létrehozása
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Shadow DOM-ba zárt stílus */
        </style>
        <p>Ez a szöveg a Shadow DOM-ban van</p>
      `;
    }
  });
</script>

Fő különbségek:

Jellemző	Virtual DOM	Shadow DOM
Mi ez?	Memóriában lévő koncepció/minta	Valódi böngésző technológia
Célja	UI frissítések optimalizálása	Stílusok és szerkezet inkapszulálása
Hol használják?	Frameworkök/Könyvtárak (React, Vue)	Web komponensek
Hogyan működik?	Fák összehasonlítása a memóriában	Elkülönített DOM fa létrehozása