Da li postoji Shadow DOM u React-u ili samo Virtual DOM?

У React се подразумева Virtual DOM. Shadow DOM је одвојена технологија веб-компонената.

React користи Virtual DOM за побољшање перформанси ажурирања корисничког интерфејса. Уместо директне манипулације стварним DOM-ом при свакој промени стања, React креира лаку копију DOM-а у меморији (Virtual DOM). При променама, React упоређује тренутни Virtual DOM са претходним, налази минималне разлике и ажурира само потребне делове стварног DOM-а.

Shadow DOM, с друге стране, је део стандарда за веб-компоненте и намењен је за инкапсулацију стилова и структуре унутар корисничких елемената. Он ствара одвојено дрво DOM-а, изоловано од главног документа.

Може се користити React заједно са веб-компонентама које користе Shadow DOM, али сам React по подразумевану не креира и не користи Shadow DOM за своје компоненте.

// Пример концепције Virtual DOM у React
// При промени стања, React упоређује VDOM
// и ажурира само променљиве делове DOM-а
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React ће ажурирати само текстуални чвор са бројем у стварном DOM-у
  }

  render() {
    return (
      <div>
        <p>Бројач: {this.state.count}</p> {/* Овај део компонента ће бити виртуелизован */}
        <button onClick={() => this.increment()}>Повећај</button>
      </div>
    );
  }
}

<!-- Пример коришћења 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-а
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Стил је инкапсулиран у Shadow DOM */
        </style>
        <p>Овај текст је у Shadow DOM-у</p>
      `;
    }
  });
</script>

Основне разлике:

Карактеристика	Virtual DOM	Shadow DOM
Шта је?	Концепт/патерн у памети	Реална технологија прегледача
Назив	Оптимизација ажурирања UI	Инкапсулација стилова и структуре
Где се користи?	Frameworks/Libraries (React, Vue)	Веб компоненти
Како ради?	Упоређује дрвета у памети	Креира изоловано DOM дрво