React Frontend Developer

Question 1

Как реализовать поддержку темной темы (dark mode) с помощью HTML и CSS? Какие метатеги и медиавыражения используются?

Accepted Answer

Темную тему можно реализовать с помощью CSS-медиавыражения prefers-color-scheme, которое определяет предпочтения пользователя относительно цветовой схемы (светлой или темной). В зависимости от предпочтений браузера применяются соответствующие стили. Также можно настроить переключение темы вручную с помощью JavaScript и CSS-классов.

Question 2

Что такое условный рендеринг в React?

Accepted Answer

Условный рендеринг — это способ отображения элементов в React на основе определенных условий. Это работает так же, как условные операторы в JavaScript. Например, вы можете показать один компонент, если условие истинно, и другой, если условие ложно.

Question 3

Какие особенности имеют хуки useEffect и useLayoutEffect?

Accepted Answer

useEffect выполняется асинхронно после рендеринга, что позволяет обновлять DOM без блокировки отображения. useLayoutEffect, напротив, выполняется синхронно сразу после изменения DOM и перед его отображением, что позволяет производить измерения или манипуляции с элементами. Это может быть полезно, когда необходимо сразу же реагировать на изменения и избежать мерцания интерфейса.

Question 4

Есть ли ограничения на количество контейнеров, которые можно запустить в Docker?

Accepted Answer

В Docker нет явного ограничения на количество контейнеров. Ограничения зависят от аппаратных ресурсов, таких как объем памяти и количество процессорных ядер.

Question 5

Как обеспечить изоляцию зависимостей?

Accepted Answer

Изоляция достигается через отдельные бандлы, scoped CSS, namespace для глобальных объектов и использование Shadow DOM при необходимости.

Question 6

Что будет выведено в консоль при вызове метода объекта, если внутри используется this, и почему

Accepted Answer

this не “лежит” внутри функции навсегда — он определяется в момент вызова. Если функция вызвана как метод объекта (obj.fn()), то this обычно будет указывать на obj. Если вынести метод в переменную и вызвать как обычную функцию (const f = obj.fn; f()), то this потеряется: в strict mode станет undefined, а без strict mode — глобальным объектом (в браузере это window). У стрелочной функции нет своего this, она берет его из внешнего окружения.

Question 7

Когда следует использовать computed, а когда обычные методы?

Accepted Answer

computed следует использовать для значений, которые зависят от реактивных данных и используются в шаблоне. Методы лучше подходят для действий или вычислений, которые выполняются по событию. Если нужен кэшируемый результат — выбирают computed. Если логика должна выполняться каждый раз — метод. Это помогает избежать лишних перерисовок.

Question 8

Как ведут себя width и height у строчных элементов?

Accepted Answer

У строчных элементов свойства width и height не применяются напрямую. Их размер определяется содержимым. Вертикальные размеры зависят от line-height и шрифта. Это часто удивляет начинающих разработчиков. Для управления размерами требуется изменить display.

Question 9

Что такое JavaScript и зачем он нужен?

Accepted Answer

setTimeout и setInterval не являются частью стандарта ECMAScript (ядра JavaScript). Они предоставляются Web API в браузерах и API Node.js в серверной среде. Это означает, что их реализация зависит от окружения, но они везде работают схожим образом. Например, в браузерах они управляются event loop, а в Node.js — модулем timers. Их поведение стандартизировано де-факто благодаря широкой поддержке.

Question 10

Может ли концепция Virtual DOM использоваться вне React?

Accepted Answer

Virtual DOM — это концепция, а не эксклюзивная часть React. Это паттерн программирования, при котором создается легковесное представление реального DOM в памяти. Другие библиотеки, такие как Vue.js и Inferno, также используют эту идею для оптимизации обновлений интерфейса. Суть в том, чтобы сравнивать изменения в виртуальном дереве и применять только необходимые правки к реальному DOM, что ускоряет рендеринг. Вы можете даже реализовать свою собственную упрощенную версию Virtual DOM для учебных целей.

Вопросы React Frontend Developer