React Frontend Developer

Question 1

Можете объяснить концепцию HOC (Higher-Order Components) в React?

Accepted Answer

HOC (компонент высшего порядка) — это функция, которая принимает компонент и возвращает новый компонент. Это позволяет повторно использовать логику между разными компонентами, не изменяя их исходный код. HOC полезны, когда нужно добавить общую функциональность, такую как авторизация или управление состоянием.

Question 2

Чем отличаются pure components от обычных компонентов?

Accepted Answer

Pure components (чистые компоненты) автоматически предотвращают повторные рендеры, если их пропсы или состояние не изменились. Это делается с помощью поверхностного сравнения значений. Обычные компоненты, с другой стороны, рендерятся каждый раз, когда их родительский компонент обновляется, даже если их пропсы или состояние не изменились.

Question 3

Почему Хук useMemo в React не используется для замены shouldComponentUpdate?

Accepted Answer

Хук useMemo используется для оптимизации производительности, запоминая результат вычисления и избегая его повторного выполнения при неизменных зависимостях. Однако он не предназначен для управления рендерингом компонентов, как это делает shouldComponentUpdate, который отвечает за решение о необходимости обновления компонента.

Question 4

Как использовать CSS-in-JS библиотеки (например, styled-components) в React-проектах?

Accepted Answer

CSS-in-JS библиотеки позволяют писать стили прямо в JavaScript коде. В styled-components стили создаются как компоненты, что упрощает динамическое изменение стилей на основе состояния и использования тем.

Question 5

Как работает получение данных на сервере в Next.js? (Раньше — getServerSideProps, в App Router — async-компоненты)

Accepted Answer

В старом Pages Router для получения данных на сервере использовалась специальная функция getServerSideProps, которая передавала данные в компонент страницы через пропсы. В новом App Router Server Components (помеченные как async) могут напрямую получать данные с помощью fetch или других библиотек, а затем рендерить JSX.

Question 6

Какие есть ограничения у серверных компонентов в Next.js? (Отсутствие состояния, хуков)

Accepted Answer

Серверные компоненты не могут использовать состояние (useState), эффекты (useEffect) и другие хуки жизненного цикла, потому что они рендерятся один раз на сервере и не "живут" в браузере. Они также не могут использовать браузерные API (например, window или document) и обработчики событий.

Question 7

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

Accepted Answer

PureComponent - это базовый класс в React, который автоматически реализует метод shouldComponentUpdate с поверхностным сравнением пропсов и состояния. Он предотвращает лишние ререндеры компонента, когда пропсы и состояние не изменились, что улучшает производительность приложения.

Question 8

Какие недостатки у styled-components?

Accepted Answer

styled-components упрощают работу со стилями, но добавляют runtime-нагрузку. Они увеличивают размер бандла и усложняют отладку CSS. Стили генерируются во время выполнения, что может влиять на производительность. Также появляется зависимость от библиотеки. Этот подход не всегда оправдан для простых проектов.

Question 9

Почему styled-components могут влиять на производительность?

Accepted Answer

styled-components генерируют CSS во время выполнения. При каждом рендере может происходить пересоздание стилей. Это увеличивает нагрузку на JavaScript и замедляет отрисовку. Особенно заметно при большом количестве компонентов. Производительность зависит от сценария использования.

Question 10

В чём отличие React.memo и PureComponent?

Accepted Answer

React.memo — это обёртка для функционального компонента, которая пропускает ререндер, если props не изменились. PureComponent — базовый класс для классового компонента, который делает то же самое, но ещё сравнивает state. В обоих случаях используется поверхностное сравнение (shallow compare). Если props или state меняются по ссылке, компонент будет считаться изменившимся.

Вопросы React Frontend Developer