React-ში Shadow DOM არსებობს თუ მხოლოდ Virtual DOM?

React-ი დეფოლტად იყენებს Virtual DOM-ს. Shadow DOM არის ცალკე ტექნოლოგია ვებ-კომპონენტებისთვის.

React იყენებს Virtual DOM-ს, რათა გაუმჯობესოს UI-ის განახლების ეფექტიანობა. ყოველ ცვლილებაზე, 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 განახლებების ოპტიმიზაცია	სტილების და სტრუქტურის ინკაფსულაცია
სად გამოიყენება?	ფრეიმვორქები/ბიბლიოთეკები (React, Vue)	ვებ-კომპონენტები
როგორ მუშაობს?	შედარება ხეების მეხსიერებაში	იზოლირებული DOM ხის შექმნა