Согласование и виртуальный DOM
Вопрос
Что такое виртуальный DOM и как React решает, что менять?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
рендер строит лёгкое дерево описаний, а не настоящие узлы
новое дерево сравнивается со старым - это и есть согласование
сравнение эвристическое: разный тип узла - поддерево пересоздаётся целиком
списки сопоставляются по key
меняется только то, что действительно отличается - это коммит
виртуальный DOM не быстрее ручного DOM, он предсказуемее
Что могут спросить следом
- Почему смена типа узла сбрасывает состояние поддерева
- Что такое фазы render и commit
- Чем fiber отличается от старого стекового согласования
Разбор
Рендер возвращает дерево лёгких объектов-описаний. React сравнивает его с предыдущим и вычисляет минимальный набор правок настоящего DOM - фаза согласования, затем коммит.
Сравнение эвристическое и за линейное время: если тип узла изменился (div → span,
другой компонент), поддерево не сравнивается, а пересоздаётся вместе с состоянием. Внутри
списков сопоставление идёт по key.
Честная формулировка для собеседования: виртуальный DOM не быстрее аккуратного ручного обновления. Он даёт декларативность и предсказуемость - ты описываешь целевое состояние, а не последовательность правок.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.