React Frontend Developer

Question 1

Какова роль render props в React?

Accepted Answer

Render props — это паттерн в React, при котором компонент получает функцию для рендеринга через пропсы. Этот подход позволяет передавать динамическую логику и данные между компонентами, обеспечивая гибкость в рендеринге.

Question 2

Как происходит render в React?

Accepted Answer

Рендеринг в React происходит в два этапа: первый — это виртуальный рендер, когда React создает виртуальный DOM, а второй — это обновление реального DOM. Когда изменяется состояние или пропсы, React вычисляет различия между предыдущим и новым виртуальным DOM и обновляет только те части реального DOM, которые изменились, что делает рендеринг эффективным.

Question 3

Что такое Server-Side Rendering (SSR) и какие преимущества он дает? (SEO, первоначальный рендеринг на сервере)

Accepted Answer

SSR — это процесс рендеринга React-приложения на сервере в HTML на каждый запрос. Это улучшает SEO, так как поисковые боты видят готовый контент, и ускоряет первоначальную загрузку страницы для пользователя, потому что браузер сразу получает готовую для отображения разметку.

Question 4

Использовались ли кастомные render features или post-process эффекты и как они создаются?

Accepted Answer

Кастомные render features позволяют добавлять собственные шейдеры и обработку кадров в URP. Они создаются через ScriptableRendererFeature и ScriptableRenderPass, где можно выполнять рендер в RenderTexture, накладывать эффекты, изменять буферы или делать fullscreen-постэффекты. В HDRP используется Custom Pass Volume. Обычно кастомные эффекты применяют для blur, outlines, distortion, спецэффектов и UI-переходов.

Question 5

Что такое URP и чем он отличается от Built-in Render Pipeline?

Accepted Answer

URP — это современный рендер-пайплайн Unity, оптимизированный для производительности. Он пришёл на смену Built-in Pipeline. URP лучше подходит для мобильных устройств. Он даёт больше контроля над рендерингом и лучшую оптимизацию. Built-in проще, но менее гибкий.

Question 6

В каком порядке выполняются render, useLayoutEffect и useEffect?

Accepted Answer

Сначала React выполняет render, затем на этапе коммита вызывается useLayoutEffect, и только после отрисовки браузером вызывается useEffect. useLayoutEffect выполняется синхронно и блокирует отрисовку, а useEffect — асинхронно, после paint. Поэтому useLayoutEffect используют для работы с layout, а useEffect — для побочных эффектов, не влияющих на разметку.

Question 7

Что такое useSyncExternalStore и для чего он нужен?

Accepted Answer

useSyncExternalStore — это хук React для безопасного подключения внешнего состояния к рендерингу. Он позволяет подписаться на внешний стор и гарантирует, что компонент всегда рендерится с актуальными данными. Этот хук решает проблемы, которые возникают при ручных подписках в условиях concurrent rendering и Strict Mode. Его используют как основу для state-менеджеров.

Question 8

Какие хуки жизненного цикла Vue выполняются на серверной стороне?

Accepted Answer

При серверном рендеринге Vue выполняются не все хуки жизненного цикла. Хуки, связанные с DOM, на сервере не вызываются. Обычно выполняются хуки до монтирования, такие как beforeCreate и created. Это связано с тем, что на сервере отсутствует реальный DOM. Понимание этого важно при разработке SSR-приложений.

Question 9

Из каких структур состоит render tree?

Accepted Answer

Render tree строится на основе DOM и CSSOM. В него попадают только те элементы, которые должны отображаться на странице, и для каждого вычисляются стили. Затем render tree используется для layout и последующей отрисовки. Элементы с display: none в render tree не попадают.

Вопросы React Frontend Developer