Reactda Shadow DOM bormi yoki faqat Virtual DOMmi?

React'da standart tarzda Virtual DOM ishlatiladi. Shadow DOM web komponentlarining alohida texnologiyasidir.

React Virtual DOM'dan foydalanadi, bu foydalanuvchi interfeysini yangilashni optimallashtirish uchun. Har bir holat o'zgarishida, React haqiqiy DOM bilan taqqoslaydi, minimal farqlarni topadi va faqat kerakli qismlarni yangilaydi.

Shadow DOM esa, web komponentlar standarti qismidir va u uslublar va tuzilmani inkapsulyatsiya qilish uchun mo'ljallangan. U alohida DOM daraxtini yaratadi va asosiy hujjatdan ajralib turadi.

React, Shadow DOM ishlatadigan web komponentlar bilan birga ishlatilishi mumkin, ammo React odatda o'z komponentlari uchun Shadow DOM yaratmaydi yoki ishlatmaydi.

// React'da Virtual DOM konseptiga misol
// Holat o'zgarganda, React VDOM'ni taqqoslaydi
// va faqat o'zgargan qismlarni yangilaydi
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React haqiqiy DOM'dagi raqamli matn tugunini yangilaydi
  }

  render() {
    return (
      <div>
        <p>Hisoblagich: {this.state.count}</p> {/* Bu qism virtualizatsiya qilinadi */}
        <button onClick={() => this.increment()}>O'stirish</button>
      </div>
    );
  }
}

<!-- Shadow DOMdan foydalanish misoli -->
<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 yaratish
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Shadow DOMda inkapsulatsiya qilingan uslublar */
        </style>
        <p>Bu matn Shadow DOMda</p>
      `;
    }
  });
</script>

Asosiy farqlar:

Xususiyat	Virtual DOM	Shadow DOM
Nima?	Xotirada konsept/shablon	Brauzer texnologiyasi
Ma'nosi	UI yangilanishini optimallashtirish	Usul va tuzilmani inkapsulyatsiya qilish
Qayerda ishlatiladi?	Frameworklar/Kutubxonalar (React, Vue)	Web komponentlar
Qanday ishlaydi?	Xotirada daraxtlarni taqqoslash	Izolyatsiyalashgan DOM daraxtini yaratish