Skip to main content

Що робить Virtual DOM?

ReactJunior~2 хв читання
Запропонувати правку

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

Простіше кажучи: React не працює напряму з реальним DOM, а спочатку оновлює його копію в пам'яті, порівнює зміни, і лише потім мінімально оновлює справжній DOM.

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

  1. Компонент повертає JSX:
javascript
function App() { return <h1>Hello, world!</h1>; }
  1. React перетворює JSX на об'єкт JavaScript - віртуальне дерево:
javascript
{ type: 'h1', props: { children: 'Hello, world!' } }

Це і є Virtual DOM - легка, внутрішня структура, що описує UI. 3. При зміні стану (setState, useState тощо):

  • React створює нове віртуальне дерево (новий знімок інтерфейсу);
  • порівнює його з попереднім (через алгоритм diffing / reconciliation);
  • знаходить відмінності і точково оновлює реальні DOM-вузли.
  1. У підсумку React не перемальовує весь DOM, а лише ті елементи, які реально змінилися.

Приклад (на інтуїтивному рівні)

Припустимо, у нас є компонент:

javascript
function Counter({ count }) { return ( <div> <p>Лічильник: {count}</p> <button>+</button> </div> ); }

Коли count змінюється з 1 → 2:

  • React створює нове віртуальне дерево,
  • порівнює з попереднім,
  • бачить, що змінився лише текст всередині <p>,
  • оновлює лише цей текстовий вузол у реальному DOM.

Без Virtual DOM React довелося б перебудовувати весь <div>, що дорого і повільно.

Навіщо це потрібно

Робота з реальним DOM:

  • повільна (кожен доступ - це звернення до дерева браузера);
  • викликає reflow / repaint (перерахунок стилів і перемальовування);
  • може "гальмувати" при частих змінах.

Virtual DOM вирішує цю проблему:

  • Усі обчислення виконуються в пам'яті (JS-об'єкти).
  • Потім React одним пакетом застосовує зміни до DOM.
  • Це прискорює рендеринг і робить інтерфейс плавним.

Ключові переваги

ПеревагаОпис
Швидше, ніж робота напряму з DOMОновлюється в пам'яті, а не в браузері
Зручність декларативного кодуРозробник просто "описує", що він хоче бачити
Легке оновлення UIReact сам обчислює, що і де потрібно змінити
Мінімізація помилокМенше прямої роботи з DOM API і станами елементів

Алгоритм "reconciliation" (узгодження)

Це механізм, за допомогою якого React:

  1. Порівнює старе і нове віртуальне дерево.
  2. Визначає, які частини інтерфейсу змінилися.
  3. Оновлює лише ці частини в реальному DOM.

React використовує ключі (key) і Fiber-архітектуру, щоб цей процес був асинхронним і перериваним (починаючи з React 16+).

Важливо розуміти

  • Virtual DOM - не стандарт браузера, а внутрішній механізм React (і подібних бібліотек).
  • Він не робить оновлення "магічно миттєвими", але розумно мінімізує непотрібні операції з реальним DOM.

Проста метафора

Уяви, що ти редагуєш документ:

  • Реальний DOM - це паперова копія, писати на ній довго.
  • Virtual DOM - це чернетка в комп'ютері. Ти робиш усі правки в пам'яті, а потім друкуєш лише змінені сторінки.

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

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

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

Запропонувати правку