Как происходит алгоритм согласования двух деревьев в Virtual DOM

Virtual DOM использует алгоритм **reconciliation** (согласование) для эффективного обновления реального DOM. Процесс включает: 1. **Сравнение корневых элементов**: Если типы разные (например, `div` → `span`), старое дерево полностью удаляется и создаётся новое. 2. **Сравнение атрибутов**: Если тип тот же, обновляются только изменённые атрибуты (например, `className`, `style`). 3. **Рекурсивный обход дочерних элементов**: React использует **key** для сопоставления элементов между рендерами. Без `key` порядок изменений может привести к неоптимальным перерисовкам. **Пример с ключами**: ```jsx // До

• A
• B

// После (элементы поменялись местами)

• B
• A

``` React переместит элементы в DOM, а не пересоздаст их, благодаря `key`. Без ключей произойдёт полная перерисовка. Оптимизация через **diffing-алгоритм** сокращает количество операций с реальным DOM.