React Frontend Developer

Question 1

Почему модальные окна обычно реализуют через порталы?

Accepted Answer

Модальные окна реализуют через порталы, чтобы рендерить их вне обычной DOM-иерархии. Это помогает избежать проблем с z-index, overflow и позиционированием. При этом модалка остаётся частью React-дерева. Порталы позволяют сохранить логику React и упростить стилизацию. Это стандартный и рекомендуемый подход.

Question 2

Как происходит парсинг HTML и построение DOM-дерева?

Accepted Answer

Браузер читает HTML-документ последовательно, символ за символом. Он разбивает текст на токены и на их основе создаёт узлы DOM. Каждый HTML-тег становится узлом дерева. В результате формируется иерархическая структура, отражающая вложенность элементов страницы.

Question 3

Что такое DOM-дерево и как оно устроено?

Accepted Answer

DOM (Document Object Model) — это программный интерфейс для HTML и XML документов, который представляет документ в виде дерева объектов. Каждый элемент, атрибут и текстовый фрагмент становится узлом (node) этого дерева. Браузер создаёт DOM при загрузке страницы, чтобы JavaScript мог изменять структуру, стиль и содержимое документа. Без DOM скрипты не могли бы взаимодействовать с элементами страницы.

Question 4

Как фильтровать дерево, сохраняя родительские узлы?

Accepted Answer

Для фильтрации дерева с сохранением родительских узлов используется рекурсивная функция. Она проверяет каждый узел: если он соответствует условию, то включается в результат. Если нет, функция рекурсивно проверяет дочерние узлы. Если хотя бы один потомок подходит, родитель сохраняется. Это позволяет отобразить только релевантные ветки, не теряя контекст.

Question 5

Для чего нужен Provider в Context API?

Accepted Answer

Provider — это компонент из Context API React, который передает значение контекста всем дочерним компонентам. Он оборачивает часть дерева компонентов и предоставляет им доступ к данным без явной передачи через props. Это упрощает управление глобальным состоянием, например, темой или авторизацией.

Question 6

Чем DOM отличается от HTML?

Accepted Answer

HTML — это текстовая разметка, которую вы пишете в файле. DOM (Document Object Model) — это объектная модель документа, которую браузер создаёт на основе HTML. DOM — это живое, динамическое дерево узлов, которое можно изменять с помощью JavaScript, в то время как HTML остаётся неизменным. Изменения в DOM не сохраняются обратно в HTML-файл.

Question 7

Как браузер строит DOM-дерево при парсинге HTML?

Accepted Answer

Браузер получает HTML-документ и начинает его парсинг. Он разбивает сырой HTML на токены (теги, атрибуты, текст), затем строит из них узлы (Node). Узлы связываются в древовидную структуру — DOM (Document Object Model). Этот процесс выполняется последовательно, но может быть приостановлен при встрече скриптов или CSS.

Question 8

Строится ли DOM-дерево независимо от CSS, или они зависят друг от друга?

Accepted Answer

DOM и CSSOM строятся независимо друг от друга, но для построения render tree (дерева рендеринга) они объединяются. Браузер парсит HTML и CSS параллельно, однако JavaScript может блокировать построение DOM, если он ожидает загрузки CSS. Render tree строится только после того, как оба дерева готовы.

Вопросы React Frontend Developer