React Native в мобильной разработке: что это, ключевые понятия и как работает

Основы (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — синтаксическое расширение JavaScript для описания UI. Выглядит как HTML, но работает через React.createElement(). JSX выражения: {variable}, {condition && <View />}, {array.map()}. Functional Component — функция, возвращающая JSX. Принимает props как аргумент. Современный стандарт React (до React 16.8 использовались Class Components). Hooks — функции для доступа к состоянию и жизненному циклу из Functional Component. Правила Hooks: только на верхнем уровне, только в Functional Components.

Hooks Reference

useState — локальное состояние. useEffect — side effects. useContext — доступ к Context. useRef — mutable ref. useCallback — мемоизация функции. useMemo — мемоизация значения. Custom Hooks — переиспользуемая логика: function useDebounce(value, delay).

// Functional Component с хуками в React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Хуки (useState, useEffect, useRef, useCallback, useMemo)

useState — возвращает [value, setValue]. setValue — замена (не merge, как setState в Class). Для объектов: setUser(prev => ({ ...prev, name: 'New' })). useEffect — выполняется после рендера. Массив зависимостей: [] — один раз (mount), [dep] — при изменении dep, undefined — каждый рендер. Cleanup функция — return () => {}. useContext — const value = useContext(MyContext). Требует Context.Provider выше в дереве.

useRef — mutable объект, сохраняющий значение между рендерами. .current — мутация. Используется для: доступа к нативным элементам (ref={inputRef}), хранения предыдущего значения, таймеров. useCallback — возвращает мемоизированную функцию. const handlePress = useCallback(() => {}, [dep]). useMemo — возвращает мемоизированное значение. const sorted = useMemo(() => data.sort(), [data]). Используйте useMemo для дорогих вычислений.

useState — для простого состояния. useEffect — для API вызовов и подписок. useCallback/useMemo — для оптимизации. IT Sectr рекомендует не мемоизировать всё подряд — только при реальных проблемах производительности.

Custom Hooks

Custom Hook — функция, использующая встроенные хуки. Имя с use*. Примеры: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks — основной способ переиспользования логики в React Native. IT Sectr рекомендует выносить бизнес-логику в Custom Hooks и оставлять компоненты чистыми (только JSX + стили).

Компоненты (View, Text, FlatList, ScrollView, SafeAreaView)

View — базовый контейнер (аналог div). Text — текст (единственный компонент для текста). TextInput — ввод текста. ScrollView — скроллируемый контейнер. FlatList — виртуализированный список для больших данных. SectionList — FlatList с секциями. SafeAreaView — автоматические отступы от Safe Area (notch, status bar). Pressable — современная замена TouchableOpacity. useColorScheme — определение тёмной/светлой темы.

FlatList Optimization

FlatList — виртуализация: рендерятся только видимые элементы + windowSize. Оптимизация: 1) keyExtractor — уникальный ключ, 2) getItemLayout — фиксированная высота (пропуск измерения onLayout), 3) React.memo для renderItem, 4) maxToRenderPerBatch (по умолчанию 10), 5) windowSize (по умолчанию 21), 6) removeClippedSubviews, 7) initialNumToRender.

Навигация в React Native

React Navigation — стандартный навигационный стек. NativeStackNavigator — нативная анимация (push/pop). TabNavigator — нижние вкладки. DrawerNavigator — боковое меню. NavigationContainer — корневой компонент навигации. Deep linking — linking конфиг для внешних ссылок. Authentication flow — условная навигация: isAuth ? AppStack : AuthStack. IT Sectr рекомендует NativeStackNavigator для основных экранов и TabNavigator для навигации первого уровня.

Стили (StyleSheet)

StyleSheet.create() — создание стилей. Все свойства в camelCase: backgroundColor, fontSize, marginTop. Flexbox — модель по умолчанию (flexDirection: 'column'). Нет CSS cascade, нет наследования, нет селекторов. Inline styles — работают, но не рекомендуется. StyleSheet.compose() — комбинирование стилей. Platform.select — платформенные стили: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — управление safe area insets.

Styled Components и CSS-in-JS

Styled Components — библиотека для CSS-in-JS в React Native. Restyle — темизация + responsive стили. NativeWind — Tailwind CSS для React Native. Unistyles — быстрые стили с atomic CSS. Dark mode — useColorScheme + динамические стили. IT Sectr рекомендует StyleSheet.create для простоты и NativeWind для проектов с дизайн-системой.

Анимация (Animated API)

Animated API — декларативная анимация. Animated.Value — значение анимации. Animated.timing — простая анимация. Animated.spring — пружинная анимация. Animated.View — анимируемый View. useNativeDriver — анимация на нативном потоке (transform, opacity — поддерживаются). Animated.loop — зацикленная анимация. LayoutAnimation — автоматическая анимация при изменении layout. reanimated 2/3 (библиотека) — более производительная альтернатива. Metro Bundler — JavaScript bundler. Собирает JS + ассеты в bundle. Поддерживает Fast Refresh (Hot Reload). Hermes — JS engine, оптимизированный для мобильных: быстрый старт, меньше памяти. Default с RN 0.70+.

Gesture Handler и анимации

React Native Gesture Handler — нативная обработка жестов. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — декларативный API жестов. Reanimated + Gesture Handler — комбинация для 60fps анимаций с жестами. react-native-skia — GPU-рендеринг для сложной 2D-графики. IT Sectr рекомендует Reanimated 3 для всех анимаций производительнее Animated API.

Networking (fetch, AsyncStorage, API)

fetch — встроенный HTTP-клиент. Поддерживает GET, POST, headers, body. Axios — популярная библиотека с интерцепторами. AsyncStorage — key-value хранилище (аналог UserDefaults). MMKV — быстрая альтернатива AsyncStorage от WeChat. react-native-keychain — безопасное хранение токенов. React Query (TanStack Query) — управление серверным состоянием: кэширование, ревалидация, пагинация. IT Sectr рекомендует React Query для API-запросов и MMKV для локального хранения.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules и Turbo Modules

Native Module — мост между JS и нативным кодом (Java/Kotlin для Android, ObjC/Swift для iOS). Позволяет вызывать нативные API из JS. Turbo Modules (New Architecture) — замена старых Native Modules. Синхронный вызов, типизация через Codegen, меньше overhead. Fabric Renderer — новый рендерер с синхронным layout. JSI (JavaScript Interface) — прямой доступ JS к нативным объектам без моста. IT Sectr рекомендует Turbo Modules для новых проектов и Native Modules для существующих.

// Нативный модуль Android (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Тестирование (Jest, React Native Testing Library)

Jest — стандартный тест-раннер. describe/it/expect. React Native Testing Library — тестирование компонентов. render, fireEvent, waitFor. screen.getByText, getByTestId — поиск. userEvent — симуляция действий. Snapshot тесты — toMatchSnapshot(). MSW (Mock Service Worker) — мокирование API. Detox — E2E тесты для RN (grey-box, нативный). IT Sectr рекомендует React Native Testing Library для компонентов и Detox для сквозных сценариев.

CodePush (App Center) — OTA обновления JS-бандла без публикации в App Store/Google Play. Используется для: горячих фиксов, A/B тестов, изменений контента. Ограничения: нельзя менять нативный код. Альтернативы: EAS Update (Expo), react-native-update. IT Sectr рекомендует CodePush для срочных фиксов и EAS Update для Expo-проектов.

Expo — фреймворк для React Native. Managed workflow — все конфиги через app.json. Development builds — кастомные нативные модули без eject. Expo SDK — встроенные модули: камера, биометрия, уведомления. EAS Build — облачная сборка. Expo Router — файловая маршрутизация (аналог Next.js). IT Sectr рекомендует Expo для новых проектов и bare RN для проектов с глубокой нативной кастомизацией.