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

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

Props — данные только для чтения, переданные родительским компонентом, и владеет ими тот, кто их передал; state — локальное состояние компонента, которое меняется со временем через useState или useReducer. Компонент, получивший одни и те же props дважды без изменения state, должен рендерить одинаковый результат — именно это делает props предсказуемыми. Передача сеттеров вниз через props («поднятие состояния») — стандартный способ дать дочернему компоненту вызвать изменение state, которым он не владеет.

Что такое JSX и во что он на самом деле компилируется?

JSX — синтаксический сахар для вызовов React.createElement: <View style={styles.box}>{text}</View> превращается в дерево объектов-элементов, а не в реальные DOM-узлы, потому что DOM в нативном приложении нет. Трансформация Babel превращает теги в вызовы функций ещё до выполнения JS, так что JSX — удобство времени сборки, а не рантайм-фича. В React Native эти объекты-элементы в итоге описывают иерархию нативных view, а не HTML.

Что делают `useState` и `useEffect`, и когда запускается эффект?

useState даёт компоненту кусок состояния и сеттер, который при вызове запускает ре-рендер; useEffect выполняет побочный эффект после коммита рендера и перезапускается только тогда, когда изменилось что-то из массива зависимостей. Забытая зависимость — самая частая причина устаревших замыканий: эффект продолжает ссылаться на значение из того рендера, в котором был создан. Пустой массив зависимостей означает «запустить один раз при монтировании», а отсутствие массива — «запускать после каждого рендера».

Как устроена стилизация в React Native и почему Flexbox ведёт себя иначе, чем в вебе?

CSS здесь нет — стили это JS-объекты, созданные через StyleSheet.create и под капотом отображённые на свойства нативных view. Flexbox остаётся движком раскладки, но flexDirection по умолчанию column, а не row, каскада CSS нет, а единицы — безразмерные density-independent пиксели, а не px/em/rem. Проценты в ширине, flex: 1 для заполнения оставшегося пространства и justifyContent/alignItems для выравнивания покрывают большинство реальных раскладок.

Как работает навигация через React Navigation, и что добавляет deep linking?

React Navigation представляет приложение как дерево навигаторов — stack, tab, drawer, — каждый экран регистрируется под именем, а navigation.navigate('Screen', params) переключается между ними, сохраняя стек истории для жеста «назад». Deep linking сопоставляет внешнюю URL-схему или universal link с конкретным экраном и параметрами, так что push-уведомление или ссылка из веба может сразу открыть, скажем, экран деталей заказа, а не главный экран приложения. Правильная реализация требует обработки и холодного старта (приложение ещё не запущено), и тёплого возврата по ссылке уже работающего приложения.

Что такое мост (bridge), и чем он отличается от JSI и New Architecture?

В старой архитектуре JS и нативный код не разделяют память — они общаются через мост, асинхронную, батчированную, JSON-сериализуемую очередь сообщений, из-за чего каждый нативный вызов несёт стоимость сериализации и задержку. JSI (JavaScript Interface) заменяет это прямыми C++-биндингами: JS хранит ссылки на нативные объекты и вызывает их методы синхронно, без сериализации. New Architecture строится поверх JSI: TurboModules заменяют нативные модули, а Fabric заменяет старый UI-менеджер, оба общаются с нативным кодом напрямую вместо очереди через мост.

Как не дать длинному `FlatList` подтормаживать?

Дать каждому элементу стабильный keyExtractor, обернуть компонент строки в React.memo, чтобы ре-рендер родителя не перерисовывал каждую строку, и избегать инлайновых функций и объектных литералов в renderItem, потому что новая ссылка на каждый рендер сводит мемоизацию на нет. getItemLayout пропускает проход измерения, если высота строки фиксирована, а windowSize/initialNumToRender/removeClippedSubviews меняют память на плавность скролла. Для очень больших или сложных списков FlashList от Shopify решает ту же задачу с меньшим количеством ручной настройки.

В чём реальные различия между сборкой под iOS и Android в React Native?

Safe area, поведение клавиатуры и стилизация теней (shadow*-пропсы на iOS против elevation на Android) расходятся настолько, что пиксель-в-пиксель паритет требует платформенно-специфичного кода через Platform.select или расширения файлов .ios.js/.android.js. Разрешения, настройка push-уведомлений и лимиты фоновых задач подчиняются правилам каждой платформы — ограничения фонового выполнения у Android и более строгое ревью App Store у iOS это разные ограничения, а не просто разные API. Нативный модуль, написанный под одну платформу, требует полноценного аналога на Swift/Objective-C и Kotlin/Java, прежде чем заработает на обеих.

Как на самом деле выходит релиз — при чём тут Metro, OTA-обновления и ревью в сторе?

Metro бандлит и раздаёт JS во время разработки и упаковывает его в бинарник приложения для релиза; он не является частью того, что получают пользователи, это просто инструмент сборки. Сервисы OTA-обновлений вроде CodePush или Expo Updates отправляют новый JS-бандл прямо на установленные приложения без ревью App Store или Play Store, что быстро для багфиксов, но прямо запрещено для всего, что меняет нативный код или выходит за рамки того, что стор считает «просто контентом». Нативные изменения — новый нативный модуль, разрешение, обновление SDK — всегда требуют полной сборки и новой отправки в стор, поэтому команда живёт на двух скоростях: OTA для чисто JS-фиксов, релизы через стор для всего нативного.