React Frontend Developer

Question 1

Что такое рабочий процесс Gitflow?

Accepted Answer

Gitflow — это стратегия ветвления, которая делит разработку на несколько веток: main для релизов, develop для активной разработки и дополнительные ветки для новых функций, исправлений багов и релизов. Этот процесс удобен для крупных проектов с чёткими этапами разработки.

Question 2

Какие действия триггерят reflow, repaint. И как можно избежать частого reflow?

Accepted Answer

Reflow происходит, когда меняется структура страницы или размеры элементов, и браузеру нужно пересчитать расположение. Repaint вызывается, когда меняется внешний вид (например, цвет), но размеры остаются прежними. Частые reflow замедляют работу страницы, поэтому их стараются минимизировать — например, группируя изменения в DOM или используя classList, а не менять стили по одному.

Question 3

В какой момент мидлвары отрабатывают в цикле Redux?

Accepted Answer

Middleware отрабатывают после вызова dispatch() но до того, как экшен достигнет редюсеров. Они находятся в середине процесса диспатча, между инициацией экшена и фактическим обновлением состояния. Каждое middleware в цепочке получает экшен и решает передать его дальше, модифицировать или отменить.

Question 4

Как организована работа с задачами (Trello, колонки, приоритеты)?

Accepted Answer

Работа с задачами часто организуется с помощью канбан-досок, таких как Trello или Jira. Задачи представляются карточками, которые перемещаются по колонкам, отражающим этапы процесса (например, "To Do", "In Progress", "Done"). Приоритеты задач определяются с помощью меток, порядка в колонке или отдельного поля. Такой подход обеспечивает визуализацию прогресса, помогает выявлять узкие места и позволяет команде фокусироваться на наиболее важных задачах.

Question 5

Что такое reflow и repaint?

Accepted Answer

Reflow (перекомпоновка) — это процесс пересчета размеров и позиций элементов на странице при изменении DOM или CSS. Repaint (перерисовка) — это обновление внешнего вида элементов без изменения геометрии. Reflow всегда вызывает repaint, но не наоборот. Частые reflow'ы снижают производительность, поэтому их стараются минимизировать.

Question 6

Когда происходит перерасчет layout?

Accepted Answer

Перерасчет layout (reflow) происходит, когда изменяются геометрические свойства элементов: ширина, высота, позиция, отступы, или когда добавляются/удаляются элементы из DOM. Также reflow вызывается при изменении размеров окна, активации CSS-псевдоклассов (например, :hover), чтении некоторых свойств (offsetHeight, scrollTop) и при изменении содержимого (например, текста). Это дорогая операция, поэтому её стараются минимизировать.

Question 7

Может ли обращение к DOM через JS вызвать reflow?

Accepted Answer

Да, обращение к DOM через JavaScript может вызвать reflow. Reflow — это процесс пересчёта геометрии элементов на странице. Когда вы читаете или изменяете свойства, влияющие на размеры или положение элементов (например, offsetHeight, clientWidth, scrollTop), браузер может принудительно выполнить reflow, чтобы вернуть актуальные значения. Это может негативно сказаться на производительности, особенно при частых операциях.

Question 8

Какие ветки используются в GitFlow?

Accepted Answer

GitFlow использует две основные ветки: master (или main) и develop. Ветка master содержит стабильный код для релизов, а develop — интеграционную ветку для разработки. Дополнительно используются feature-ветки для новых функций, release-ветки для подготовки релизов и hotfix-ветки для срочных исправлений в master.

Question 9

Что такое text-overflow: ellipsis и какие CSS-свойства обязательно нужно задать, чтобы оно работало?

Accepted Answer

text-overflow: ellipsis добавляет многоточие в конце текста, который не помещается в контейнер. Для его работы обязательно задать overflow: hidden (или другое значение, кроме visible) и white-space: nowrap (чтобы текст не переносился). Также нужно указать фиксированную ширину контейнера.

Question 10

Как решать проблему overflow при отображении выпадающего списка в React?

Accepted Answer

Проблема overflow возникает, когда выпадающий список выходит за границы родительского контейнера. Решить её можно с помощью CSS-свойства overflow: visible на родителе, использования порталов React (ReactDOM.createPortal) для рендеринга списка вне контейнера, или применения библиотек типа Popper.js для динамического позиционирования. Также помогает установка z-index и проверка границ экрана.

Вопросы React Frontend Developer