React Native: bu nədir, Bridge necə işləyir və JavaScript mühiti

React Native nədir

React Native — bu Facebook (indiki Meta) komandası tərəfindən yaradılmış və 2015-ci ildə open-source olaraq buraxılmış freymvorkdur. Hibrid yanaşmalardan (Cordova, Ionic) fərqli olaraq, React Native WebView-dən istifadə etmir. Bunun əvəzinə JavaScript komponentləri nativ UI elementlərinə xəritələnir: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

React Native-in ilk versiyası yalnız iOS-u dəstəkləyirdi. Android dəstəyi 2016-cı ildə əlavə edildi. Versiya 0.60 (2019) Autolinking-i — nativ asılılıqların avtomatik qoşulmasını təqdim etdi. React Native 0.68 (2022) yeni Fabric + TurboModules arxitekturasını əlavə etdi. Cari stabil versiya 0.74 (2024) Flexbox düzümü üçün Yoga 3.0 dəstəyi ilə tamamilə New Architecture arxitekturasına keçirilmişdir.

Statista 2024 məlumatlarına görə, React Native çoxplatformalı layihələrin 38%-də istifadə olunur. Freymvorkdan Discord, Instagram, Shopify, Pinterest, Skype və Uber Eats istifadə edir. Meta React Native-dən Facebook və Instagram-da — 2 milyard istifadəçisi olan əsas mobil tətbiqdə istifadə edir.

React Native-in tarixi və təkamülü

React Native 2015-ci ilin yanvarında React.js Conf-da elan edildi. Ideya React-in deklarativ paradiqmasını vebdən mobil platformalara köçürmək idi. Repozitoridəki ilk commit 2013-cü ildə Facebook-un iOS üçün Facebook Groups tətbiqini yaratmaq üçün daxili layihəsi kimi göründü.

0.70 versiyası (2022) Hermes-i default JavaScript mühərriki kimi təqdim etdi. Hermes mobil cihazlar üçün optimallaşdırılmış öncədən kompilyasiya (AOT) mühərrikidir. Tətbiqin işə düşmə vaxtını 50% azaldır və JavaScriptCore ilə müqayisədə APK ölçüsünü 30% kiçildir. Hermes ES6 və qismən ES2020-ni dəstəkləyir.

React Native ilə React Web arasındakı fərq

React Web komponentləri ReactDOM vasitəsilə DOM elementlərinə (div, span, p) render edir. React Native platformanın nativ komponentlərinə render edir. <div> əvəzinə <View>, <span> əvəzinə <Text> istifadə olunur. Stillər StyleSheet.create() obyekti vasitəsilə təyin edilir, bu da platformanın CSS xüsusiyyətlərinə tərcümə olunur. Flexbox Yoga mühərriki vasitəsilə default olaraq aktivdir.

Naviqasiya React Native-də vebdən fərqlənir. react-router-dom əvəzinə React Navigation istifadə olunur — Stack, Tab və Drawer naviqatorlarını dəstəkləyən nativ kitabxana. React Navigation 6.x nativ animasiyalardan (useNativeDriver) və Deep Links inteqrasiyasından istifadə edir. iOS UINavigationController və Android Fragment ekranlarının nativ naviqasiyası üçün Wix-dən react-native-navigation kitabxanası tətbiq olunur.

React Native arxitekturası

React Native arxitekturası ənənəvi olaraq Bridge ətrafında qurulmuşdu — JavaScript mühiti ilə nativ kod arasında asinxron JSON kanalı. 0.68 versiyasından etibarən Meta Bridge-i JSI (JavaScript Interface) və Fabric ilə əvəz edən New Architecture-nı təqdim etdi. Hər iki modeli nəzərdən keçirək.

Bridge və Fabric

Bridge — bu bir neçə iplikdə işləyən seriallaşdırılmış JSON protokoludur: JS Thread (React kodunun interpretasiyası), Main Thread (UI) və Native Modules Thread (API). JS ilə nativ kod arasında hər qarşılıqlı əlaqə obyektlərin seriallaşdırılması və deseriallaşdırılmasından keçir, bu da tez-tez çağrışlarda gecikmələrə səbəb olur. 1000 elementli siyahını sürüşdürmə zamanı Bridge saniyədə 10 000-ə qədər JSON mesajı yaradır.

Fabric — React Native-də yeni renderinq sistemi. Bridge əvəzinə Fabric JSI vasitəsilə UI ipliyi ilə sinxronlaşan C++ Shadow Tree-dən istifadə edir. Bu JSON seriallaşdırmanı aradan qaldırır: nativ C++ kodu birbaşa JavaScript mühitində funksiyaları çağırır və əksinə. Fabric renderinq gecikməsini 16 ms-dən (Bridge) 2–4 ms-ə endirir.

TurboModules — New Architecture-nın ikinci hissəsi. Köhnə modeldə bütün nativ modullar tətbiq başladıqda yüklənirdi. TurboModules modulları tənbəl (lazy loading) yükləyir — yalnız JS kodu onları ilk dəfə tələb etdikdə. Bu, 20+ nativ modullu tətbiqlərdə soyuq başlama vaxtını 40% azaldır.

React Native-də tətbiq nümunəsi

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Nativ modullar

Nativ modullar — bu JavaScript-dən platforma API-lərini çağırmaq mexanizmidir. Funksionallıq React Native-in standart komponentləri ilə əhatə olunmursa (kamera, Bluetooth, biometriya), proqramçı Swift/Kotlin-də modul yazır və onu RCTBridgeModule və ya TurboModule vasitəsilə qeydiyyatdan keçirir. Nativ funksiya JS-dən NativeModules.CameraModule.takePhoto() vasitəsilə çağrılır.

React Native akselerometr (react-native-sensors), geolokasiya (@react-native-community/geolocation), biometriya (react-native-biometrics) və yerli bildirişlər (@notifee/react-native) üçün hazır nativ modullar təqdim edir. Xüsusi ssenarilər üçün Expo, Xcode və ya Android Studio olmadan nativ modullar yaratmaq üçün daha sadə interfeys olan Expo Modules API təklif edir.

React Native-in üstünlükləri

Böyük icma — React Native çoxplatformalı freymvorklar arasında ən böyük icmaya malikdir. GitHub-da layihənin 117 000+ ulduzu, 1800+ töhfəçisi var. npm həftədə react-native-i 3 milyon+ dəfə endirir. React Native ilə bağlı suallar Stack Overflow-un mobil inkişaf bölməsindəki bütün sualların 5%-ni təşkil edir.

JavaScript ekosistemi — React proqramçıları vebdəki kimi eyni alətlərdən istifadə edir: npm, Babel, ESLint, Prettier, Jest, TypeScript. Biznes məntiqi veb versiyası (React) ilə mobil tətbiq (React Native) arasında təkrar istifadə edilə bilər. Redux, Zustand, React Query, React Hook Form kitabxanaları hər iki platformada dəyişmədən işləyir.

Expo — bu React Native-də tətbiq inkişafını sadələşdirən SDK və alətlərdir. Expo hazır modullar (kamera, bildirişlər, xəritələr, OAuth), bulud qurmaları (EAS Build) və OTA yeniləmələri (EAS Update) təqdim edir. Expo Go tətbiqi Xcode və Android Studio olmadan fiziki cihazda işə salmağa imkan verir. Expo 2024 məlumatlarına görə, yeni React Native layihələrinin 70%-i Expo-dan istifadə edir.

OTA yeniləmələri — Expo Update və CodePush (Microsoft) vasitƏ Silə mövcud olan xüsusiyyət. Proqramçılar JavaScript paketinin yeniləmələrini App Store və ya Google Play baxışından keçmədən birbaşa istifadəçilərə göndərə bilər. Bu, kritik səhvlərin düzəldilməsini 2–5 gündən (baxış gözləmə) 1–2 saata endirir.

TypeScript dəstəyi React Native 0.71-dən etibarən default olaraq aktivdir. Layihə şablonu tsconfig.json, bütün komponentlər üçün tiplər və strict mode dəstəyini əhatə edir. Flow (Facebook-dan statik tipləmə) da dəstəklənir, lakin Meta rəsmi olaraq TypeScript-i tövsiyə edir. TypeScript şablonu State of React Native 2024 sorğusuna görə yeni layihələrin 85%-ni təşkil edir.

Ekosistem və məşhur kitabxanalar

npm — React Native üçün əsas paket reyestridir. Kitabxana axtarışı react-native açar sözü ilə filtrlənir. Quraşdırma üçün npm install və ya yarn add istifadə olunur. React Native CLI nativ asılılıqları avtomatik birləşdirir (0.60 versiyasından). Expo layihələri üçün quraşdırma expo install vasitəsilə idarə olunur, bu da kitabxananın uyğun versiyasını seçir.

Əsas kitabxanalar

@react-navigation/native — React Native-də naviqasiya üçün de-fakto standartdır. Kitabxanaya Stack Navigator (animasiyalı keçidlər), Tab Navigator (iOS/Android üçün alt menyu), Drawer Navigator (yan menyu) və Material Top Tab daxildir. React Navigation 7.x (2024) marşrutların statik konfiqurasiyasını və useSyncExternalStore ilə React 18-in tam dəstəyini təqdim etdi.

react-native-reanimated — yüksək performanslı animasiyalar üçün kitabxana. Reanimated 3.x animasiyaları JS ipliyini keçərək UI ipliyində (worklet) yerinə yetirir. Bu, 100+ elementin animasiyasında belə 60 FPS təmin edir. useSharedValue, useAnimatedStyle və withSpring standart paketdən Animated API-ni əvəz edir. Reanimated toxunma jestlərini react-native-gesture-handler vasitəsilə idarə edir.

@tanstack/react-query — server vəziyyətini idarə etmək üçün kitabxana. React Query API cavablarını keşləyir, şəbəkə dəyişdikdə sorğuları avtomatik təkrarlayır (refetchOnReconnect) və useInfiniteQuery ilə səhifələməni dəstəkləyir. Versiya 5.x UX üçün optimist yeniləmələr əlavə edir — interfeys server cavabını almadan əvvəl yenilənir, sonra düzəldilir.