Как в React происходит согласование деревьев?

Согласование деревьев (reconciliation) — процесс, которым React приводит старое дерево к новому: параллельный обход с эвристиками, дающими O(n) вместо O(n³).

Ход согласования

После рендера у React два дерева: текущее (отражено в DOM) и новое (только что вычислено). Узлы сравниваются попарно, сверху вниз:

Разные типы узлов (div → section, UserCard → Banner):

• поддерево пересоздаётся целиком: старое размонтируется (state теряется, cleanup'ы выполняются), новое монтируется;
• вглубь React не смотрит — допущение: разные типы дают разные деревья.

Тот же DOM-тип: узел сохраняется; сравниваются атрибуты — фиксируются только отличия (className, поля style); дальше рекурсивно сравниваются дети.

Тот же тип компонента: экземпляр и state сохраняются; компонент вызывается с новыми props, согласование продолжается по его выводу.

Списки и key

Дети без key сопоставляются по позициям: вставка в начало «сдвигает» всех — массовые обновления и переезд state. С key React строит соответствие по ключам: распознаёт перемещения (переставить узел), добавления и удаления — минимум операций, state у своих данных.

Результат и Fiber

Итог обхода — список эффектов («обновить текст здесь, вставить узел там»), применяемый к DOM в commit-фазе одним пакетом. С архитектуры Fiber (React 16) согласование разбито на прерываемые единицы работы: React 18 приоритизирует срочные обновления, не блокируя ввод тяжёлым диффом.

Коротко для собеседования

Согласование — попарный обход старого и нового дерева: разные типы → пересоздание поддерева (с потерей state), тот же тип → сохранение узла/экземпляра и дифф атрибутов, списки → сопоставление по key. Эвристики дают O(n); результат — минимальный пакет правок для commit; на Fiber процесс прерываем и приоритизируем.