Что такое виртуальный DOM и зачем в списках нужен key?
- Как React решает, что перерисовать?
- Почему нельзя использовать индекс массива как key?
Компонент возвращает описание интерфейса (дерево React-элементов). При обновлении React сравнивает новое дерево со старым (reconciliation) и применяет к настоящему DOM минимальные изменения. key помогает сопоставить элементы списка между рендерами: по нему React понимает, какой элемент тот же, а какой новый.
- Разный тип элемента в той же позиции — поддерево пересоздаётся целиком
- key по индексу ломает состояние при вставке и удалении в середине
- key должен быть стабильным и уникальным среди соседей — id из данных
А ещё Смена key принудительно пересоздаёт компонент — способ сбросить его состояние
Подробно
Зачем. Прямые изменения DOM дороги и легко рассинхронизируются с состоянием. React позволяет описывать интерфейс как функцию от состояния, а вычисление изменений берёт на себя.
Эвристики сравнения (полное сравнение деревьев — O(n³), React делает за O(n)):
- элементы разного типа (
div→span,A→B) — старое поддерево удаляется, новое создаётся; - элементы одного типа — обновляются атрибуты, компонент получает новые props, состояние сохраняется;
- дети списка сопоставляются по key.
Почему индекс плох как key. Удалили первый элемент — все последующие получили индексы на единицу меньше. React решит, что удалился последний, а остальные изменились: перерисует всё и, хуже, перенесёт состояние (введённый текст, отметку чекбокса) не на те строки.
Фазы: render (вычислить дерево, без побочных эффектов) и commit (применить к DOM, запустить эффекты).
Что хотят услышать
- Идея описания интерфейса и сравнения деревьев.
- Эвристики reconciliation.
- Роль key и проблема индексов.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗React каждый раз пересоздаёт весь DOM
- ✗key нужен только для стилей
- ✗Индекс массива — всегда лучший key: он уникален и не требует данных от сервера
- ✓Сравнивает новое дерево со старым и применяет разницу; key сопоставляет элементы списка
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.