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, чтобы стабилизировать ссылки. Это особенно полезно при передаче колбэков или объектов в дочерние компоненты.

Вопросы React Frontend Developer