Reactте Shadow DOM барбы, же гана Virtual DOMбы…

React боюнча алдын ала орнотулгандай Virtual DOM колдонулат. Shadow DOM — бул веб-компоненттердин өзүнчө технологиясы.

React Virtual DOMду колдонуп, колдонуучу интерфейсин жаңылоону жогорку натыйжалуулукта камсыздайт. Ар бир өзгөртүүндө, React реалдуу DOMду түз түз өзгөртпөстөн, эсинде жеңил көчүрмөсүн (Virtual DOM) түзөт. Өзгөртүүлөр учурунда, React учурдагы Virtual DOM менен мурункусын салыштырып, минималдуу айырмачылыктарды табат жана керек болгон бөлүктөрдү гана жаңыртат.

Shadow DOM — бул веб-компоненттер стандартынын бир бөлүгү жана стилдерди жана структураны инкапсуляциялоо үчүн арналган. Ал өзүнчө DOM дарагын түзөт, ал негизги документтен изоляцияланган.

React менен Shadow DOM колдонсо болот, бирок React өз алдынча Shadow DOM түзбөйт жана колдонбойт.

// Reactтеги Virtual DOM концепциясынын мисалы
// Абалы өзгөргөндө, 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 дарагын түзүү

Reactте Shadow DOM барбы, же гана Virtual DOMбы?