Выбор ответа Middle Рендер и reconciliation обновлено
Компонент внутри компонента
Вопрос
Почему при вводе каждого символа поле теряет фокус?
function Form() {
const [text, setText] = useState('');
function Field() {
return <input value={text} onChange={e => setText(e.target.value)} />;
}
return <Field />;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Field объявлен внутри Form: новый тип на каждом рендере. Функция Field пересоздаётся на каждом рендере Form, для React это новый тип компонента, поэтому старый input размонтируется, а новый монтируется без фокуса.
Варианты ответа
Fieldобъявлен внутриForm: новый тип на каждом рендереправильный ответonChangeвызывает лишний рендер, и браузер сбрасывает фокус- Нужно добавить постоянный
keyна<Field /> - Контролируемый input теряет фокус без
useRef
Разбор
Функция Field пересоздаётся на каждом рендере Form, для React это новый тип компонента, поэтому старый input размонтируется, а новый монтируется без фокуса. Сам рендер на ввод нормален. Постоянный key не поможет, тип всё равно другой. Контролируемые поля фокус не теряют, если их не пересоздавать. Исправление: вынести Field наружу.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.