Выбор ответа Middle Рендер и reconciliation спрашивают часто обновлено
Индекс как key при вставке в начало
Вопрос
Список задач рендерится с key={index}, у каждой строки неконтролируемый <input defaultValue={todo.text} />. Пользователь отредактировал первую строку, затем в начало списка добавили новую задачу. Что произойдёт?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Отредактированный текст окажется в новой первой строке. С ключом-индексом новая задача получает key 0, а старый DOM-узел с key 0 (с вашими правками) переиспользуется для неё.
Варианты ответа
- Всё корректно: React сравнит строки по содержимому
defaultValue - React выбросит ошибку о дублирующихся ключах в списке
- Отредактированный текст окажется в новой первой строкеправильный ответ
- Все строки смонтируются заново, и правки пропадут
Разбор
С ключом-индексом новая задача получает key 0, а старый DOM-узел с key 0 (с вашими правками) переиспользуется для неё. Остальные строки тоже сдвигаются. React не сравнивает содержимое, только тип и key. Дублей нет, индексы уникальны. Перемонтирования нет, именно поэтому правки и «переезжают».
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.