DOM және Virtual DOM дегеніміз не?

DOM (Құжат Объектісі Моделі) — бұл HTML, XML және SVG құжаттарына арналған бағдарламалық интерфейс. Ол құжаттың құрылымдық көрінісін түйіндер ағашы түрінде ұсынады және бағдарламалар оның мазмұнына, құрылымына және стильдеріне қалай қол жеткізуге болатынын анықтайды, сондай-ақ оларды өзгертуге мүмкіндік береді.

Virtual DOM — бұл жадыда орналасқан DOM-ның бағдарламалық көрінісі. Ол React сияқты кітапханалар мен фреймворктерде UI жаңартуларын оңтайландыру үшін пайдаланылады.

Салыстыру:

Белгі	DOM	Virtual DOM
Түрі	Құжатқа арналған API интерфейсі	Жадыдағы DOM-ның көрінісі
Өзгерту	Элементтерді тікелей басқару	Жаңа ағаш құру, алдыңғымен салыстыру
Өнімділік	Жиі өзгерістер кезінде салыстырмалы баяу	Жиі топтық жаңартуларда тезірек
Қиындық	Элементтерге тікелей қол жеткізуге байланысты	DOM жаңартудың күрделілігін жасырады
Экранды жаңарту	Әр өзгеріс UI-дың бөлігін қайта бейнелейді	Diffing-ден кейін бір топтық жаңарту

React-те Virtual DOM жұмыс істеу процесі:

1. Компоненттің күйі өзгерген кезде React жаңа Virtual DOM ағашын құрады.
2. Бұл жаңа Virtual DOM ағашы алдыңғы ағашпен салыстырылады ("diffing" процесі).
3. Актуалды DOM-ды жаңарту үшін қажетті ең аз өзгерістер жиынтығы анықталады.
4. Бұл өзгерістер топтастырылып, нақты DOM-ға қолданылады ("reconciliation" процесі).

Virtual DOM концепциясының мысалы (қарапайым түрде):

// Бастапқы Virtual DOM күйі
const virtualDom1 = {
  type: 'div',
  props: {},
  children: [
    { type: 'h1', props: {}, children: ['Привет1'] }
  ]
};

// Мәліметтер өзгергеннен кейінгі жаңа Virtual DOM күйі
const virtualDom2 = {
  type: 'div',
  props: {},
  children: [
    { type: 'h1', props: {}, children: ['Привет2'] }
  ]
};

// Diffing процесі (virtualDom1 мен virtualDom2 салыстырылуы) анықтайды:
// h1 ішіндегі мәтін өзгерді

// Reconciliation процесі (нақты DOM-ға өзгерістерді қолдану)
// Тек h1 элементінің мәтінін жаңартады, бүкіл div-ты емес.