Этап 3 из 12 · ≈ 3 ч

Refs и работа с DOM

Основа с Junior

useRef, доступ к DOM-элементам, фокус и интеграция со сторонними библиотеками.

useRef хранит изменяемое значение, изменение которого не вызывает перерисовку. Два применения: ссылка на DOM-элемент и «переменная экземпляра» (идентификатор таймера, предыдущее значение).

function SearchBox() {
  const input = useRef(null);
  useEffect(() => input.current.focus(), []);
  return <input ref={input} />;
}

Что важно знать

  • Не читать и не менять ref.current во время рендера — только в эффектах и обработчиках.
  • В React 19 ref передаётся компоненту как обычный prop; forwardRef нужен только в старых версиях.
  • useImperativeHandle — открыть родителю ограниченный набор методов (focus, scrollTo).
  • Refs — «аварийный выход»: для того, что нельзя выразить состоянием (фокус, размеры, сторонние виджеты вроде карт и графиков).

Критерии освоения

Junior ≈ 3 ч

  • Использует useRef для доступа к DOM и фокуса

Практика. Сделать поле, которое получает фокус при открытии модального окна.

Middle ≈ 3 ч

  • Передаёт ref в дочерние компоненты и открывает методы через useImperativeHandle
  • Интегрирует сторонние библиотеки (карты, графики) через ref и эффекты

Практика. Обернуть стороннюю библиотеку графиков в React-компонент с корректным созданием и уничтожением.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как получить доступ к DOM-элементу через useRef?Junior

const inputRef = useRef<HTMLInputElement>(null) и <input ref={inputRef}/> — после монтирования в inputRef.current будет DOM-элемент. Использовать его можно в обработчиках и эффектах (фокус, прокрутка, измерение размеров, воспроизведение видео), но не во время…

Полный разбор
Чем useRef отличается от useState?Junior

Оба сохраняют значение между рендерами, но изменение ref.current не вызывает перерисовку, а setState — вызывает. Ref — «ящик» для значений, которые не влияют на вывод: id таймера, предыдущее значение, флаг «уже отправлено», экземпляр сторонней библиотеки…

Полный разбор
Как передать ref в свой компонент и открыть его методы?Middle

По умолчанию ref на свой компонент не попадает в его DOM. В React 19 ref передаётся как обычный prop; в прежних версиях компонент оборачивали в forwardRef. useImperativeHandle позволяет открыть родителю не весь DOM-элемент, а ограниченный набор методов…

Полный разбор
Как найти и изменить элементы DOM на JavaScript?Junior

Найти: querySelector(css-селектор) — первый элемент, querySelectorAll — статический список. Изменить: textContent — текст (безопасно), innerHTML — разметка (опасно с пользовательскими данными — XSS), classList.add/remove/toggle, setAttribute, dataset…

Полный разбор
Как работает useState?Junior

const [value, setValue] = useState(initial) — React хранит значение вне функции компонента, привязав его к позиции хука; при следующих рендерах возвращает текущее. setValue планирует перерисовку; если новое значение равно старому (Object.is) — рендер…

Полный разбор
Что такое всплытие и перехват событий и как работает делегирование?Junior

Событие проходит три фазы: перехват (от window вниз к цели), цель, всплытие (от цели вверх). Обработчики по умолчанию срабатывают на всплытии. Делегирование — один обработчик на родителе ловит события детей через всплытие и определяет источник по event.target…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования