Virtual DOM — это абстракция реального DOM, которую использует React для эффективного обновления пользовательского интерфейса. Вместо непосредственного изменения реального DOM, React сначала создаёт виртуальное дерево элементов в памяти.

Механизм reconciliation — это процесс сравнения нового Virtual DOM с предыдущей версией, чтобы определить минимальный набор изменений, необходимых для обновления реального DOM. React использует несколько оптимизаций:

Поэлементное сравнение: React сравнивает элементы по типу и ключам (key). Если тип элемента не изменился, React обновляет только изменённые пропсы.
Ключи (key): Позволяют эффективно сопоставлять элементы в списках, минимизируя перестроение.
Диффинг на уровне веток: Если тип компонента изменился, React удаляет старую ветку и создаёт новую, не сравнивая глубже.

Таким образом, React минимизирует количество операций с реальным DOM, что повышает производительность.

Пример:

const prevTree = <ul><li key="1">A</li><li key="2">B</li></ul>;
const nextTree = <ul><li key="1">A</li><li key="2">C</li></ul>;

React обнаружит, что элемент с key "2" изменился с "B" на "C" и обновит только этот узел в реальном DOM.

Расскажи про Virtual DOM и механизм reconciliation в React. Как React оптимизирует сравнение деревьев?