Կա՞ React-ում Shadow DOM, թե՞ միայն 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-ի թարմացումների օպտիմալացում	Սթայլերի և կառուցվածքի ամփոփում
Որտե՞ղ է օգտագործվում	Ֆրեյմվորկներ/գրադարաններ (React, Vue)	Վեբ կոմպոնենտներ
Ինչպե՞ս է աշխատում	Դատում է ծառերը հիշողության մեջ	Ստեղծում է առանձնացված DOM ծառ