Вопросы на собеседовании: React-разработчик

React представляет собой JavaScript-библиотеку для создания пользовательских интерфейсов из переиспользуемых компонентов.

• Разработчик описывает вид интерфейса для текущих данных вместо ручного изменения DOM-узлов.
• Компоненты делят интерфейс на самостоятельные части со своими входными данными и поведением.
• React обновляет DOM браузера при изменении данных компонентов.

React-компонент представляет собой переиспользуемую единицу, которая возвращает описание интерфейса для React.

• Компонент может получать пропсы от родителя.
• Он может хранить локальное состояние, если его результат должен меняться со временем.
• Компоненты могут рендерить браузерные элементы и другие компоненты.

Функциональный компонент является JavaScript-функцией, которую React вызывает для вычисления части интерфейса.

• Её параметры обычно содержат пропсы, переданные родителем.
• Она обычно возвращает JSX, React-элемент или null.
• Хуки позволяют функциональным компонентам использовать состояние и поведение, связанное с жизненным циклом.

Тег JSX с заглавной буквы сообщает React, что он ссылается на пользовательский компонент.

• Теги в нижнем регистре, например div и button, считаются встроенными браузерными элементами.
• Имя с заглавной буквы, например Profile, разрешается как JavaScript-переменная в текущей области видимости.
• Из-за имени компонента в нижнем регистре React может принять его за неизвестный HTML-тег.

JSX является расширением синтаксиса, которое позволяет описывать дерево React-элементов в JavaScript с помощью разметки, похожей на HTML.

• Перед выполнением JSX преобразуется в вызовы JavaScript или равнозначные инструкции среды выполнения.
• Он может представлять как браузерные элементы, так и пользовательские React-компоненты.
• JSX необязателен, но упрощает чтение и написание вложенных структур интерфейса.

JavaScript-выражения помещают в фигурные скобки внутри JSX.

• Выражения могут задавать текст, значения пропсов, атрибуты или дочерние элементы.
• Внутри скобок значение могут создавать вызовы, обращения к свойствам, вычисления и условные выражения.
• Инструкции if, for и объявления переменных нужно выполнять вне JSX или выражать другим способом.

Для некоторых браузерных атрибутов JSX использует имена свойств в стиле JavaScript.

• Вместо class используется className, потому что class является ключевым словом JavaScript.
• Большинство составных DOM-свойств записываются в camelCase, например tabIndex и onClick.
• Строковые литералы можно передавать в кавычках, а JavaScript-значения помещают в фигурные скобки.

Компонент возвращает одно значение с деревом элементов, а Fragment группирует несколько соседних элементов без добавления DOM-узла.

• Обёртка вроде div тоже создаёт один корень, но меняет итоговую разметку.
• Краткий синтаксис Fragment записывается как пустые открывающий и закрывающий теги.
• Явной форме Fragment можно передать key при использовании в списке.

Компонентом называют функцию или класс, а React-элемент описывает то, что должно появиться в интерфейсе.

• JSX вида <Button /> создаёт элемент, который ссылается на компонент Button.
• React вызывает компонент, чтобы получить возвращаемые им элементы.
• Элементы служат неизменяемыми описаниями, а компоненты содержат логику их создания.

Чистый компонент создаёт одинаковый JSX при одинаковых пропсах и состоянии и не изменяет внешние значения во время рендеринга.

• Рендеринг должен вычислять интерфейс, а не выполнять побочные эффекты.
• Компонент не должен изменять пропсы или состояние во время рендеринга.
• Работу, вызванную взаимодействием или синхронизацией, размещают в обработчиках событий и эффектах.

Пропсы являются входными данными, которые родительский компонент передаёт дочернему.

• Они могут содержать строки, числа, объекты, функции или React-элементы.
• Дочерний компонент читает пропсы, чтобы настроить свой вид или поведение.
• Данные обычно передаются вниз по дереву компонентов через пропсы.

Компонент должен считать пропсы доступными только для чтения, потому что их значениями владеет родитель.

• Изменение пропса может поменять общие данные без явного запроса на обновление для React.
• Если дочернему компоненту нужно изменение, он должен вызвать переданный колбэк.
• Вместо изменения полученных через пропсы объектов или массивов нужно создавать новые значения.

Функциональный компонент может деструктурировать именованные пропсы в списке параметров и там же задать значения по умолчанию.

• Деструктуризация даёт прямые локальные имена вместо повторных обращений к объекту props.
• Значение параметра по умолчанию используется, когда пропс равен undefined.
• Переданное значение null не включает значение по умолчанию, предназначенное только для undefined.

Пропс children содержит контент, размещённый между открывающим и закрывающим JSX-тегами компонента.

• Дочерним контентом могут быть текст, элементы, компоненты, выражения или несколько значений.
• Компоненты-обёртки могут рендерить children внутри общего макета или оформления.
• Родитель управляет вложенным контентом, а обёртка определяет место его вывода.

Композиция компонентов создаёт крупные интерфейсы путём вложения и объединения небольших компонентов.

• Родители могут настраивать дочерние компоненты через пропсы.
• Компоненты-обёртки могут принимать произвольный контент через children.
• Композиция сохраняет узкую задачу каждого компонента и позволяет использовать одни части на разных экранах.

Состоянием называют данные компонента, которые React сохраняет между рендерами и использует для обновления интерфейса.

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

Пропсы приходят от родителя, а состоянием владеет и управляет тот экземпляр компонента, который его объявил.

• И пропсы, и состояние могут влиять на результат рендеринга.
• Компонент не должен напрямую изменять свои пропсы.
• Состояние меняется через сеттер, а родитель меняет передаваемые пропсы во время собственного рендера.

Локальная переменная создаётся заново при каждом рендере, а её изменение не просит React выполнить новый рендер.

• React не сохраняет обычные локальные переменные как состояние компонента между рендерами.
• Сеттер состояния записывает значение для следующего рендера и планирует обновление.
• Значения, которые должны сохраняться и влиять на интерфейс, обычно относятся к состоянию.

useState возвращает пару из текущего значения состояния и функции для его обновления.

• Деструктуризация массива обычно даёт этой паре имена вроде count и setCount.
• Текущее значение относится к тому рендеру, в котором был вызван компонент.
• Вызов сеттера ставит в очередь будущий рендер с запрошенным состоянием.

React использует начальное значение useState при первом создании состояния этого компонента.

• Последующие рендеры читают сохранённое состояние, а не сбрасывают его до начального аргумента.
• Если передать функцию, React вызовет её как инициализатор при начальном рендере.
• Инициализатор должен быть чистым, потому что при проверках в режиме разработки React может вызвать его больше одного раза.