Оё Shadow DOM дар React вуҷуд дорад ё танҳо Virtual DOM?

Дар React ба таври пешфарз Virtual DOM истифода мешавад. Shadow DOM як технологияи ҷудогонаи веб-компонентҳо мебошад.

React Virtual DOM-ро барои беҳтар кардани самаранокии навсозии интерфейси корбар истифода мебарад. Ба ҷои дастӣ тағир додани DOM-и воқеӣ дар ҳар тағироти ҳолат, React нусхаи сабукро дар хотира (Virtual DOM) месозад. Ҳангоми тағирот, React Virtual DOM-и ҳозираро бо гузашта муқоиса мекунад, фарқиятҳоро меёбад ва танҳо қисмҳои заруриро навсозӣ мекунад.

Shadow DOM, баръакс, қисми стандарти веб-компонентҳо мебошад ва барои инкапсулаи услубҳо ва сохтор дар дохили унсурҳои корбарӣ пешбинӣ шудааст. Он як дарахти DOM ҷудошударо месозад, ки аз ҳуҷҷати асосӣ ҷудо аст.

Мумкин аст React-ро бо веб-компонентҳо, ки Shadow DOM-ро истифода мебаранд, истифода бурд, аммо React ба таври пешфарз Shadow DOM-ро барои компонентҳояш намесозад ва истифода намебарад.

// Намунаи консепсияи Virtual DOM дар React
// Дар тағироти ҳолат, React VDOM-ро муқоиса мекунад
// ва танҳо қисмҳои тағирёдаро навсозӣ мекунад
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	Инкапсулаи услубҳо ва сохторҳо
Куҷо истифода мешавад?	Фреймворҳо/Китобхонаҳо (React, Vue)	Веб-компонентҳо
Кӣ чӣ гуна кор мекунад?	Муқоиса кардани дарахтҳо дар хотира	Эҷоди дарахти DOM ҷудошуда