Выбор ответа Middle Рендер и reconciliation обновлено
Смена обёртки и потеря state
Вопрос
Пользователь набрал текст в Input (у него внутренний state), затем compact стал true. Что будет с набранным текстом?
function Field({ compact }) {
return compact
? <section><Input /></section>
: <div><Input /></div>;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Потеряется: div сменился на section, поддерево новое. При смене типа элемента на той же позиции (div на section) React размонтирует старое поддерево целиком, включая state детей, и монтирует новое.
Варианты ответа
- Сохранится: компонент
Inputтот же и стоит на том же месте - Потеряется:
divсменился наsection, поддерево новоеправильный ответ - Сохранится, если у
Inputесть постоянныйkey - Потеряется, только если
Inputобёрнут вmemo
Разбор
При смене типа элемента на той же позиции (div на section) React размонтирует старое поддерево целиком, включая state детей, и монтирует новое. То, что внутри тот же Input, не помогает. Один и тот же key не спасёт, потому что сравнение начинается с родителя другого типа. memo на сохранение state не влияет.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.