---
sidebar_position: 2
---

# Виртуальный DOM

Механизм работы **Virtual DOM** и **Reconciliation** — это ключевые особенности React, которые делают его быстрым и эффективным для обновления пользовательских интерфейсов. Давайте разберём, как это работает.
 
## Virtual DOM (Виртуальный DOM)
### Что такое Virtual DOM?
Virtual DOM — это легковесная копия реального DOM (Document Object Model). Это JavaScript-объект, который представляет структуру HTML-документа. В React Virtual DOM используется для оптимизации обновлений интерфейса.

### Как это работает?
1. **Создание Virtual DOM:**
   - Когда вы создаёте компоненты в React, они не напрямую взаимодействуют с реальным DOM. Вместо этого React создаёт Virtual DOM — JavaScript-представление структуры вашего интерфейса.
2. **Рендеринг Virtual DOM:**
   - При первом рендере React создаёт Virtual DOM на основе JSX и отображает его в реальный DOM.
3. **Обновление Virtual DOM:**
   - Когда состояние (state) или пропсы (props) компонента изменяются, React создаёт **новый Virtual DOM** (на основе обновлённых данных).
4. **Сравнение Virtual DOM:**
   - React сравнивает новый Virtual DOM с предыдущим (этот процесс называется **Reconciliation** или "согласование").
   - React определяет, какие части Virtual DOM изменились. 
5. **Обновление реального DOM:**
   - React вносит минимально необходимые изменения в реальный DOM, чтобы он соответствовал новому Virtual DOM. Это позволяет избежать полного перерисовывания страницы.

## Reconciliation (Согласование)
### Что такое Reconciliation?
Reconciliation — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений, которые нужно применить к реальному DOM. Этот процесс делает React эффективным, так как обновляется только то, что действительно изменилось.
### Как это работает?
1. **Diff-алгоритм:**
   - React использует алгоритм сравнения (Diffing Algorithm), чтобы определить различия между старым и новым Virtual DOM.
   - Алгоритм работает на основе следующих правил:
     - Элементы разных типов: Если тип элемента изменился (например, **`<div>`** стал **`<span>`**), React удаляет старое дерево и создаёт новое.
     - Элементы одного типа: Если тип элемента остался прежним, React обновляет только изменённые атрибуты (например, **`className`**, **`style`**).
     - Дочерние элементы: React рекурсивно сравнивает дочерние элементы. Если порядок дочерних элементов изменился, React может переупорядочить их в реальном DOM.
2. **Ключи (Keys):**
   - Чтобы помочь React эффективно обновлять списки, разработчики используют атрибут **`key`**. Ключи позволяют React идентифицировать элементы списка и избежать ненужных перерисовок.
   - Например, здесь **`key`** помогает React понять, какие элементы были добавлены, удалены или изменены. 
```jsx
<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>
```
3. **Пакетное обновление (Batching):**
   -React группирует несколько обновлений состояния в один пакет, чтобы минимизировать количество операций с реальным DOM. Это улучшает производительность.


### Преимущества Virtual DOM и Reconciliation
1. **Производительность:**
   - Операции с реальным DOM медленные, а Virtual DOM позволяет минимизировать количество таких операций.
2. **Упрощение разработки:**
   - Разработчики могут сосредоточиться на описании того, как должен выглядеть интерфейс в конкретный момент времени (на основе состояния), а React автоматически обновляет DOM.
3. **Кроссплатформенность:**
   - Virtual DOM используется не только в веб-приложениях, но и в React Native для мобильной разработки.

## Итог
- **Virtual DOM** — это оптимизированная копия реального DOM, которая позволяет React быстро обновлять интерфейс.
- **Reconciliation** — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений.
Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.

🚀 **_Источник: DeepSeek_**