React Frontend Developer

Question 1

В чем разница между display: none и visibility: hidden?

Accepted Answer

• display: none полностью удаляет элемент с веб-страницы, как если бы его не существовало. Он не занимает места в макете, и элементы после него сдвигаются, чтобы занять его пространство.• visibility: hidden скрывает элемент, но оставляет его место на странице. Элемент всё ещё занимает пространство в макете, но не виден пользователю.

Question 2

Каково назначение dispatch в React Redux?

Accepted Answer

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

Question 3

Что произойдет, если изменить свойство display на block для элемента <span>?

Accepted Answer

Элемент <span> станет блочным: будет занимать всю ширину родителя, переноситься на новую строку и сможет иметь ширину/высоту, в отличие от строчного поведения.

Question 4

Как приоритизировать вызовы dispatch (например, выполнить действие последним)?

Accepted Answer

Можно использовать очереди, middleware или отложенные вызовы (setTimeout, Promise) для управления порядком диспатчей.

Question 5

Какие есть базовые значения display?

Accepted Answer

Основные значения:block — элемент занимает всю ширину, начинается с новой строки.inline — элемент занимает только необходимую ширину, не переносится.inline-block — как inline, но с возможностью задавать ширину/высоту.none — элемент скрыт и не занимает место.

Question 6

Чем отличается скрытие элементов с помощью opacity, visibility и display: none?

Accepted Answer

opacity: 0 делает элемент невидимым, но он продолжает занимать место и реагировать на события. visibility: hidden также скрывает элемент, сохраняя его место в layout, но события мыши не срабатывают. display: none полностью удаляет элемент из потока документа, освобождая занимаемое место.

Question 7

Можно ли анимировать свойства opacity, visibility и display?

Accepted Answer

opacity и visibility можно анимировать с помощью CSS-переходов и анимаций. display нельзя анимировать напрямую, но можно комбинировать с другими свойствами для создания эффектов появления/исчезновения.

Question 8

Остается ли элемент в DOM при display: none?

Accepted Answer

Да, элемент остается в DOM при display: none.Он просто исключается из layout и не отображается на странице.Элемент не занимает место и не участвует в рендеринге.DOM-узел при этом сохраняется.

Question 9

Как ведут себя width и height у строчных элементов?

Accepted Answer

У строчных элементов свойства width и height не применяются напрямую. Их размер определяется содержимым. Вертикальные размеры зависят от line-height и шрифта. Это часто удивляет начинающих разработчиков. Для управления размерами требуется изменить display.

Question 10

Как display: inline и display: block влияют на layout?

Accepted Answer

display: block заставляет элемент начинаться с новой строки и занимать всю доступную ширину. display: inline размещает элемент внутри строки текста. У блочных элементов работают width, height и вертикальные margin. У строчных — размеры зависят от контента. Это ключевое различие в CSS.

Вопросы React Frontend Developer