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

Покращити цю статтю

Допрацюйте відповідь до «Навіщо використовують virtual DOM?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Що таке Virtual DOM

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

Кожен елемент сторінки представляється **звичайним JS-об'єктом**, наприклад:

```javascript
{
  type: 'div',
  props: { className: 'card' },
  children: [
    { type: 'h1', props: { children: 'Заголовок' } },
    { type: 'p', props: { children: 'Опис' } }
  ]
}
```

Цей об'єкт і є "віртуальним DOM-вузлом" (VNode). Він **не пов'язаний напряму з браузерним DOM**, тому операції з ним дуже швидкі.

---

## 2. Як працює Virtual DOM (по кроках)

Уявімо, що застосунок оновлює інтерфейс:

1. **Застосунок змінює стан (state):**

```javascript
  setCount(count + 1);
  ```
2. **Фреймворк створює нове Virtual DOM-дерево** (на основі поточного стану компонента).
3. **Порівнює нове дерево з попереднім (diffing)** → обчислює, **що реально змінилося**.
4. **Оновлює лише змінені вузли в реальному DOM** (через мінімальну кількість операцій).

---

### Приклад:

```javascript
// Було
<div>
  <h1>Лічильник: 5</h1>
</div>

// Стало
<div>
  <h1>Лічильник: 6</h1>
</div>
```

React не перестворює весь `<div>`, він бачить, що змінилася лише **текстова нода** всередині `<h1>`, і оновлює тільки її.

---

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

Робота з **реальним DOM** - **повільна**: кожна зміна викликає reflow / repaint (перерахунок стилів, layout і перемальовування).

Virtual DOM вирішує проблему так:

| Звичайний DOM | Virtual DOM |
|---|---|
| Зміни одразу торкаються браузера | Зміни відбуваються в пам'яті |
| Кожен апдейт викликає reflow | Фреймворк сам вирішує, коли оновити DOM |
| Потрібно вручну керувати оновленнями | Алгоритм сам оптимізує "дифф" |
| Багато дрібних операцій | Кілька "батчів" оновлень |

---

## 4. Ключові переваги Virtual DOM

| Перевага | Що дає |
|---|---|
| **Менше операцій з DOM** | Оновлюються лише реальні зміни |
| **Оптимізація ререндерів** | React/Vue порівнюють старе і нове дерево |
| **Зручність декларативного UI** | "Що малювати" замість "як оновлювати" |
| **Незалежність від платформи** | VDOM можна рендерити не лише в браузері (React Native, SSR) |
| **Інваріантність порядку оновлень** | Не потрібно думати про послідовність маніпуляцій |

---

## 5. Алгоритм порівняння (diffing)

> Щоб зрозуміти, які вузли змінилися, Virtual DOM використовує **diff-алгоритм**.

- Порівнює **за ключами і типами** елементів.
- Якщо `type` збігається → порівнює `props` і `children`.
- Якщо ні - старий вузол видаляється, новий створюється.
- Алгоритм оптимізований → складність приблизно **O(n)**.

### Приклад:

```javascript
<ul>
  <li key="1">A</li>
  <li key="2">B</li>
  <li key="3">C</li>
</ul>
```

Якщо `B` видаляється - React не перестворює `C`, тому що в нього **той самий ключ**, і він "переїжджає" вгору.

---

## 6. Чому Virtual DOM все ще не "безкоштовний"

- Побудова і порівняння віртуальних дерев теж **займає час**.
- При дуже частих оновленнях (анімації, canvas) - **VDOM може бути повільнішим**.
- Тому React/Vue застосовують **батчинг оновлень** (групують їх за кадр) і **хуки на кшталт useMemo / PureComponent**.

---

## 7. Альтернативи і розвиток ідеї

| Підхід | Особливість | Приклад |
|---|---|---|
| **Virtual DOM (дифф-дерево)** | Оновлює мінімальні частини | React, Vue 2 |
| **Incremental DOM** | Одразу генерує патчі без diff | Svelte (частково), lit-html |
| **Compile-time diffing** | Код компілюється в оптимальний JS без VDOM | Svelte, Solid.js |
| **Fine-grained reactivity** | Змінюється лише конкретний сигнал/комірка | Solid.js, Vue 3 (composition API) |

> Сучасні фреймворки поступово відходять від "глобального Virtual DOM" до **точкової реактивності** (Signal-based UI).

---

## 8. Коротке резюме

| Що | Пояснення |
|---|---|
| **Virtual DOM** | JS-представлення реального DOM у пам'яті |
| **Навіщо** | Зменшити кількість прямих операцій з DOM |
| **Як** | Порівнює старе і нове дерево, оновлює лише змінені частини |
| **Плюси** | Швидше, простіше, декларативно |
| **Мінуси** | Не безкоштовний, додає шар абстракції |
| **Альтернатива** | Svelte / Solid - без глобального VDOM (компілятор сам знає, що міняти) |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати625 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.