React Frontend Developer

Question 1

Как работает элемент <dialog> и API для управления модальными окнами? Какие особенности его использования?

Accepted Answer

Элемент <dialog> позволяет создавать встроенные модальные окна на веб-странице без необходимости использования сторонних библиотек. У него есть методы .showModal() для отображения окна в модальном режиме и .close() для его закрытия. Одной из особенностей является встроенная поддержка модальности и блокировки фокуса на элементах внутри диалога, что делает его удобным для создания интерактивных всплывающих окон. Он также поддерживает атрибуты для настройки внешнего вида и поведения.

Question 2

Что такое git reflog?

Accepted Answer

git reflog показывает историю всех перемещений HEAD, включая коммиты, слияния и переключения веток. Эта команда полезна для восстановления потерянных коммитов или веток.

Question 3

Как определить порядок вывода console.log в асинхронном коде?

Accepted Answer

Чтобы определить порядок вывода console.log, нужно понимать работу event loop. Сначала всегда выполняется синхронный код из call stack. Затем выполняются все микрозадачи (например, then, catch, finally). Только после этого обрабатываются макрозадачи (setTimeout, setInterval, события). Зная, к какой очереди относится операция, можно точно предсказать порядок логов.

Question 4

Что выведется в console.log при разных вариантах вызова функций с контекстом?

Accepted Answer

Значение this зависит от способа вызова функции. При обычном вызове функции this ссылается на глобальный объект (в нестрогом режиме) или undefined (в строгом). При вызове как метода объекта this указывает на этот объект. Методы call, apply и bind позволяют явно задать контекст. Стрелочные функции не имеют своего this и используют контекст окружающей лексической области.

Question 5

Как избежать лишних вызовов console.log в дочернем компоненте?

Accepted Answer

Лишние вызовы console.log в дочернем компоненте возникают из-за повторного рендеринга. Чтобы их избежать, используйте React.memo для предотвращения ненужных рендеров, если пропсы не изменились. Также можно обернуть функции в useCallback и значения в useMemo, чтобы стабилизировать ссылки. Это особенно полезно при передаче колбэков или объектов в дочерние компоненты.

Question 6

Является ли console.log чистой функцией?

Accepted Answer

Нет, console.log не является чистой функцией. Чистая функция должна возвращать одинаковый результат для одинаковых аргументов и не вызывать побочных эффектов. console.log выводит данные в консоль, что является побочным эффектом, и возвращает undefined, а не результат вычислений.

Question 7

Как управлять открытием и закрытием <dialog> через проп open?

Accepted Answer

Элемент  в HTML имеет атрибут open, который показывает диалог. В React управление через проп open означает, что компонент контролирует видимость диалога с помощью состояния. Когда open равен true, диалог отображается, иначе скрыт. Для закрытия можно использовать метод close() или изменить состояние.

Question 8

Как использовать метод showModal() и close() у нативного элемента <dialog> через реф?

Accepted Answer

Элемент  предоставляет методы showModal() и close() для управления отображением. В React нужно получить доступ к DOM-элементу через useRef, затем вызвать эти методы в обработчиках событий. Это позволяет создавать модальные окна без сторонних библиотек.

Вопросы React Frontend Developer