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

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

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

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

Контент

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

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

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

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

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

## Визначення

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

---

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

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

```javascript
  <div>
    <h1>Привіт</h1>
    <button>Натисни</button>
  </div>
  ```
2. React **створює об'єктне представлення цього дерева** в пам'яті - Virtual DOM:

```javascript
  {
    type: "div",
    props: {
      children: [
        { type: "h1", props: { children: "Привіт" } },
        { type: "button", props: { children: "Натисни" } }
      ]
    }
  }
  ```
3. Коли дані (state, props) змінюються - React **створює нове Virtual DOM дерево**.
4. Потім React порівнює **нове** і **попереднє** дерево (процес називається **diffing**).
5. Після цього React **знаходить відмінності** і **змінює лише ті частини реального DOM**, які справді змінилися.

---

### Без Virtual DOM

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

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

---

### З Virtual DOM

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

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

---

### Приклад

#### Було:

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

#### Стало:

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

React:

1. Порівнює два Virtual DOM-дерева.
2. Бачить, що **змінилася лише цифра 4 → 5**.
3. Змінює **лише текст всередині** `<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 за результатами порівняння |

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

Для рев’юера

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

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