React-də Shadow DOM var, yoxsa yalnız Virtual DOM?

React-də standart olaraq Virtual DOM istifadə olunur. Shadow DOM, veb komponentlərinin müstəqil texnologiyasıdır.

React, istifadəçi interfeysinin yenilənməsinin performansını artırmaq üçün Virtual DOM-dan istifadə edir. Hər vəziyyət dəyişiklikdə, React real DOM-u birbaşa manipulyasiya etmək əvəzinə, yaddaşda yüngül bir nüsxəsini (Virtual DOM) yaradır. Dəyişikliklər zamanı, React mövcud Virtual DOM ilə əvvəlki versiyanı müqayisə edir, minimal fərqləri tapır və yalnız lazım olan hissələri yeniləyir.

Shadow DOM isə, veb komponentlər standartının bir hissəsidir və üslubları və strukturu kapsülləmək üçün nəzərdə tutulmuşdur. O, müstəqil DOM ağacı yaradır və əsas sənəddən izolyasiya olunur.

React, Shadow DOM istifadə edən veb komponentlərlə birlikdə istifadə oluna bilər, amma React öz komponentləri üçün standart olaraq Shadow DOM yaratmır və istifadə etmir.

// React-də Virtual DOM konseptinə nümunə
// Vəziyyət dəyişəndə, React VDOM-u müqayisə edir
// və yalnız dəyişən DOM hissələrini yeniləyir
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React, real DOM-da yalnız say ilə mətn nodunu yeniləyəcək
  }

  render() {
    return (
      <div>
        <p>Sayaç: {this.state.count}</p> {/* Bu hissə virtualizə olunacaq */}
        <button onClick={() => this.increment()}>Artır</button>
      </div>
    );
  }
}

<!-- Shadow DOM istifadə nümunəsi -->
<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 yaradılması
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Shadow DOM-da kapsüllənmiş stil */
        </style>
        <p>Bu mətn Shadow DOM-da</p>
      `;
    }
  });
</script>

Əsas fərqlər:

Xüsusiyyət	Virtual DOM	Shadow DOM
Nədir?	Yaddaşda konsept/nümunə	Brauzerin real texnologiyası
Məqsəd	UI yeniləmələrini optimallaşdırmaq	Stil və strukturu kapsülləmək
Harada istifadə olunur?	Frameworklər/Kütüphanelər (React, Vue)	Web komponentlər
Necə işləyir?	Yaddaşda ağacların müqayisəsi	İzolyasiya olunmuş DOM ağacı yaratmaq