Има ли Shadow DOM в React или само 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 дърво