Junior React Native Developer — Вопросы на собеседовании React Native

Что такое компонент в React Native, и в чём разница между функциональным и классовым компонентом?

Компонент — переиспользуемый кусок UI, написанный как функция (или, исторически, класс), возвращающая JSX с описанием того, что рендерить. Функциональные компоненты с хуками сейчас норма — код чище, нет проблем с биндингом this, и статeful-логику можно переиспользовать между компонентами через кастомные хуки так, как не позволяли методы жизненного цикла класса. Классовые компоненты по-прежнему работают и встречаются в старых кодовых базах, но новый код по умолчанию функциональный.

В чём разница между props и state?

Props приходят от родителя, и компонент не может их менять — относитесь к ним как к входным данным только для чтения. State принадлежит самому компоненту, создаётся через useState, и его изменение запускает ре-рендер. Текст на кнопке обычно props; открыто ли сейчас модальное окно — обычно state.

Что делает `useEffect`?

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

Как стилизовать компонент в React Native?

С помощью JS-объекта, обычно созданного через StyleSheet.create({...}) и переданного в проп style — отдельного CSS-файла нет. Раскладка по умолчанию использует Flexbox с flexDirection: 'column', поэтому flex: 1, justifyContent и alignItems — самые используемые свойства для расположения дочерних элементов. StyleSheet.create также позволяет React Native валидировать стили и ссылаться на них по ID вместо пересоздания объекта на каждом рендере.

Как переключаться между экранами через React Navigation?

Обернуть приложение в навигатор — обычно stack-навигатор для типичного паттерна push/pop, — зарегистрировать каждый экран под именем и вызвать navigation.navigate('ScreenName') из экрана, чтобы перейти на него. Параметры передаются вместе с вызовом, navigation.navigate('Details', { id: 5 }), а целевой экран читает их через route.params. Возврат назад — через navigation.goBack() или нативный жест/кнопку «назад», которые stack-навигатор подключает автоматически.

Чем React Native отличается от React для веба?

Здесь нет DOM и браузера — <View>, <Text> и <Image> заменяют <div>, <span> и <img> и рендерятся в реальные нативные UIKit/Android view, а не в HTML-элементы. Стилизация — JS-объекты вместо CSS, нет className, а браузерных API вроде localStorage не существует — у React Native свои аналоги, например AsyncStorage. Модель компонентов, хуки и однонаправленный поток данных — в остальном та же ментальная модель, что и в React для веба.