React Frontend Developer

Question 1

Чем отличается border от outline?

Accepted Answer

Свойство border создаёт рамку вокруг элемента и занимает пространство в модели документа, тогда как outline также создаёт рамку, но не занимает места и не влияет на размеры элемента. Кроме того, outline может быть использован только с определёнными свойствами, такими как outline-color, outline-style и outline-width.

Question 2

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

Accepted Answer

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

Question 3

Как box-sizing: border-box меняет расчёт размеров элемента?

Accepted Answer

По умолчанию (content-box): width задает только ширину контента, padding и border добавляются к ней.border-box: width включает padding и border, упрощая верстку.

Question 4

Какое CSS-свойство влияет на то, как рассчитывается итоговый размер элемента с учётом padding и border? Чем отличаются значения этого свойства?

Accepted Answer

Свойство box-sizing управляет расчетом размера элемента. Значение content-box (по умолчанию) добавляет padding и border к ширине и высоте, увеличивая элемент. Значение border-box включает padding и border в указанные размеры, упрощая верстку. Это особенно полезно для адаптивных сеток.

Question 5

Как принцип HOC применяется внутри стейт-менеджеров?

Accepted Answer

HOC — это функция, которая принимает компонент и возвращает новый компонент с дополнительными свойствами или логикой. В стейт-менеджерах, например в Redux, HOC `connect` используется для подписки компонента на хранилище и передачи ему части состояния и действий. Это позволяет отделить логику управления состоянием от представления, делая код более модульным и переиспользуемым.

Question 6

Какую проблему решает использование HOC, если множество компонентов содержат одинаковую бизнес-логику?

Accepted Answer

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

Вопросы React Frontend Developer