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