React Frontend Developer

Question 1

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

Accepted Answer

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

Question 2

Объясните концепцию code splitting и lazy loading в React.

Accepted Answer

Code splitting — это техника, позволяющая разбивать приложение на небольшие части, которые загружаются по мере необходимости. Lazy loading (ленивая загрузка) загружает эти части только тогда, когда они действительно нужны, что помогает уменьшить размер начальной загрузки и повышает скорость работы приложения.

Question 3

Как работает асинхронная загрузка компонентов (code splitting) в React?

Accepted Answer

Асинхронная загрузка компонентов в React, или code splitting, позволяет загружать компоненты по мере необходимости, а не загружать весь код приложения сразу. Это достигается с помощью динамического импорта и функции React.lazy, что позволяет значительно уменьшить начальный размер бандла и ускорить загрузку страницы.

Question 4

Что такое bundle splitting и как его настроить?

Accepted Answer

Bundle splitting — это техника, позволяющая разделить код вашего приложения на более мелкие части, которые загружаются по мере необходимости. Это снижает время загрузки начального бандла и улучшает производительность. В React вы можете использовать React.lazy() и Suspense для динамической загрузки компонентов, а также инструменты, такие как Webpack, для настройки бандл-сплитинга.

Question 5

Что такое code splitting в Webpack?

Accepted Answer

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

Question 6

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

Accepted Answer

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

Question 7

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

Accepted Answer

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

Question 8

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

Accepted Answer

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

Question 9

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

Accepted Answer

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

Question 10

Чем отличается split, reverse, join и на каких типах данных они работают?

Accepted Answer

split — это метод строки: он превращает строку в массив по разделителю. reverse — метод массива: он переворачивает массив на месте. join — метод массива: он склеивает элементы массива в строку с разделителем. Обычно эти методы используют вместе, например, чтобы развернуть строку: str.split('').reverse().join('').

Вопросы React Frontend Developer