Вопросы React Frontend Developer
Как использовать CSS-in-JS библиотеки (например, styled-components) в React-проектах?
Рейтинг:
5
Сложность:
10
CSS-in-JS библиотеки позволяют писать стили прямо в JavaScript коде. В styled-components стили создаются как компоненты, что упрощает динамическое изменение стилей на основе состояния и использования тем.
Чем отличаются pure components от обычных компонентов?
Рейтинг:
2
Сложность:
5
Pure components (чистые компоненты) автоматически предотвращают повторные рендеры, если их пропсы или состояние не изменились. Это делается с помощью поверхностного сравнения значений. Обычные компоненты, с другой стороны, рендерятся каждый раз, когда их родительский компонент обновляется, даже если их пропсы или состояние не изменились.
Можете объяснить концепцию HOC (Higher-Order Components) в React?
Рейтинг:
3
Сложность:
5
HOC (компонент высшего порядка) — это функция, которая принимает компонент и возвращает новый компонент. Это позволяет повторно использовать логику между разными компонентами, не изменяя их исходный код. HOC полезны, когда нужно добавить общую функциональность, такую как авторизация или управление состоянием.
Что такое __slots__
Рейтинг:
2
Сложность:
7
__slots__ — это специальный атрибут класса, который ограничивает набор атрибутов, которые можно присваивать экземплярам этого класса. Он помогает экономить память, исключая создание словаря для хранения атрибутов объектов.
Как использовать @supports для проверки поддержки браузером определенных CSS-свойств?
Рейтинг:
2
Сложность:
5
Директива @supports позволяет проверить, поддерживает ли браузер конкретное CSS-свойство, и применить стили только в случае успешной проверки. Это полезно для использования новых возможностей, сохраняя при этом совместимость.
Как интегрировать веб-шрифты (например, Google Fonts) в HTML и какие факторы влияют на производительность загрузки?
Рейтинг:
2
Сложность:
4
Веб-шрифты, такие как Google Fonts, можно подключить через элемент <link> в разделе <head> HTML или использовать CSS @import. Однако шрифты могут замедлять рендеринг страницы, поэтому важно оптимизировать их загрузку. Основные факторы, влияющие на производительность, включают количество стилей шрифтов, их формат и стратегию загрузки (например, font-display: swap, чтобы избежать блокировки рендеринга текста).
Что такое HTML Imports и почему они были отклонены стандартом? Какие современные альтернативы существуют для организации модулей?
Рейтинг:
1
Сложность:
5
HTML Imports — это экспериментальная технология, которая позволяла загружать и включать HTML-файлы в другие документы с помощью тега <link>. Она была отклонена из-за слабой поддержки и наличия альтернативных стандартов, таких как JavaScript модули и Web Components. Современные альтернативы включают ES-модули (import/export) и технологии, основанные на шаблонах и компонентах, такие как React и Web Components.
Как работает HTML Custom Elements API, и как можно создать и зарегистрировать собственные элементы?
Рейтинг:
2
Сложность:
6
HTML Custom Elements API позволяет разработчикам создавать собственные HTML-элементы, которые ведут себя как стандартные элементы, но могут иметь свою уникальную логику и стиль. Чтобы создать кастомный элемент, необходимо определить класс, который наследует от HTMLElement, и зарегистрировать его с помощью customElements.define(). Эти элементы могут быть использованы на странице так же, как и стандартные HTML-теги. Custom Elements расширяют возможности HTML, делая его более гибким для современных веб-приложений.
Объясните работу WebSockets и как реализовать двунаправленную связь между клиентом и сервером.
Рейтинг:
4
Сложность:
6
WebSockets — это протокол, который обеспечивает двунаправленную связь между клиентом и сервером по одному и тому же TCP-соединению. Он позволяет отправлять данные в режиме реального времени, что делает его идеальным для приложений, требующих постоянного обмена данными, таких как чаты или онлайн-игры. Для использования WebSockets необходимо создать WebSocket-клиент на стороне клиента и сервер, который будет обрабатывать подключения и сообщения.
Особенности стрелочных функций (this, arguments) и как изменить контекст?
Рейтинг:
4
Сложность:
7
Стрелочные функции не создают собственного контекста this и используют значение this из внешней функции. Они также не имеют объекта arguments, что делает их менее гибкими в некоторых ситуациях. Контекст стрелочной функции изменить нельзя, так как он жёстко привязан к внешней области видимости.