Що таке Virtual DOM?

ReactJunior~2 хв читання

Визначення

Virtual DOM (віртуальний DOM) - це легковажна копія реального DOM-дерева, яка існує в пам'яті (в JavaScript) і використовується React для ефективного оновлення інтерфейсу.

Як це працює (покроково)

Ти описуєш інтерфейс у вигляді JSX:

javascript

<div>
  <h1>Привіт</h1>
  <button>Натисни</button>
</div>

React створює об'єктне представлення цього дерева в пам'яті - Virtual DOM:

javascript

{
  type: "div",
  props: {
    children: [
      { type: "h1", props: { children: "Привіт" } },
      { type: "button", props: { children: "Натисни" } }
    ]
  }
}

Коли дані (state, props) змінюються - React створює нове Virtual DOM дерево.
Потім React порівнює нове і попереднє дерево (процес називається diffing).
Після цього React знаходить відмінності і змінює лише ті частини реального DOM, які справді змінилися.

Без Virtual DOM

Якби React напряму працював з реальним DOM:

будь-яка зміна даних → перемальовування всього вузла;
операції з DOM - повільні, особливо при великих деревах;
часті рендери → падіння продуктивності.

З Virtual DOM

React працює в пам'яті:

рахує зміни на рівні JS-об'єктів;
оновлює лише потрібні елементи в реальному DOM;
робить процес набагато швидшим та оптимальнішим.

Приклад

Було:

javascript

<p>Лайків: 4</p>

Стало:

javascript

<p>Лайків: 5</p>

React:

Порівнює два Virtual DOM-дерева.
Бачить, що змінилася лише цифра 4 → 5.
Змінює лише текст всередині <p>, а не перемальовує весь <body>.

Візуальна аналогія

Уяви, що Virtual DOM - це чернетка:

Ти спочатку робиш зміни в чернетці (в пам'яті),
Порівнюєш її з оригіналом,
І акуратно вносиш лише потрібні правки в "чистовий варіант" (реальний DOM).

Diffing і Reconciliation

React використовує алгоритм reconciliation:

порівнює старе і нове дерево Virtual DOM;
якщо вузли однакові → перевикористовує їх;
якщо різні → оновлює або замінює в реальному DOM;
робить це дуже швидко завдяки ключам (key) та евристикам.

Переваги Virtual DOM

Підвищує продуктивність (менше операцій з реальним DOM)
Спрощує роботу з UI (тобі не потрібно вручну оновлювати елементи)
Дозволяє React бути декларативним - ти просто описуєш, що має бути, а не як це намалювати
Забезпечує кросплатформність (той самий механізм використовується в React Native)

Підсумок

Що	Опис
DOM	Реальне дерево елементів у браузері
Virtual DOM	Легковажна копія DOM у пам'яті
Diffing	Порівняння старого і нового Virtual DOM
Reconciliation	Процес оновлення реального DOM за результатами порівняння

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.