React Native: bu nima, Bridge qanday ishlaydi va JavaScript muhiti

React Native nima

React Native — bu Facebook (hozirgi Meta) jamoasi tomonidan yaratilgan va 2015 yilda open-source sifatida chiqarilgan freymvorkdir. Gibrid yondashuvlardan (Cordova, Ionic) farqli o‘laroq, React Native WebView-dan foydalanmaydi. Buning o‘rniga, JavaScript komponentlari native UI elementlariga xaritalanadi: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

React Native ning birinchi versiyasi faqat iOS-ni qo‘llab-quvvatladi. Android qo‘llab-quvvatlashi 2016 yilda qo‘shildi. 0.60 versiyasi (2019) Autolinking-ni — native bog‘liqliklarni avtomatik ulashni taqdim etdi. React Native 0.68 (2022) yangi Fabric + TurboModules arxitekturasini qo‘shdi. Joriy barqaror versiya 0.74 (2024) Flexbox tartibi uchun Yoga 3.0 qo‘llab-quvvatlashi bilan to‘liq New Architecture arxitekturasiga o‘tkazildi.

Statista 2024 ma’lumotlariga ko‘ra, React Native ko‘p platformali loyihalarning 38 foizida qo‘llaniladi. Freymvorkdan Discord, Instagram, Shopify, Pinterest, Skype va Uber Eats foydalanadi. Meta React Native-dan Facebook va Instagram — 2 milliard foydalanuvchiga ega asosiy mobil ilovada foydalanadi.

React Native tarixi va evolyutsiyasi

React Native 2015 yil yanvar oyida React.js Conf da e’lon qilindi. G‘oya React-ning deklarativ paradigmasini vebdan mobil platformalarga ko‘chirish edi. Repozitoriyadagi birinchi commit 2013 yilda Facebook-ning iOS uchun Facebook Groups ilovasini yaratish bo‘yicha ichki loyihasi sifatida paydo bo‘ldi.

0.70 versiyasi (2022) Hermes-ni standart JavaScript dvigateli sifatida taqdim etdi. Hermes mobil qurilmalar uchun optimallashtirilgan oldindan kompilyatsiya (AOT) dvigatelidir. Ilovaning ishga tushirish vaqtini 50 foizga qisqartiradi va JavaScriptCore bilan solishtirganda APK hajmini 30 foizga kamaytiradi. Hermes ES6 va qisman ES2020-ni qo‘llab-quvvatlaydi.

React Native va React Web o‘rtasidagi farq

React Web komponentlarni ReactDOM orqali DOM elementlariga (div, span, p) render qiladi. React Native platformaning native komponentlariga render qiladi. <div> o‘rniga <View>, <span> o‘rniga <Text> ishlatiladi. Stillar StyleSheet.create() obyekti orqali o‘rnatiladi, u platformaning CSS xususiyatlariga tarjima qilinadi. Flexbox Yoga dvigateli orqali standart sifatida yoqilgan.

Navigatsiya React Native-da vebdan farq qiladi. react-router-dom o‘rniga React Navigation ishlatiladi — Stack, Tab va Drawer navigatorlarini qo‘llab-quvvatlovchi native kutubxona. React Navigation 6.x native animatsiyalardan (useNativeDriver) va Deep Links integratsiyasidan foydalanadi. iOS UINavigationController va Android Fragment ekranlarining native navigatsiyasi uchun Wix-dan react-native-navigation kutubxonasi qo‘llaniladi.

React Native arxitekturasi

React Native arxitekturasi an’anaviy ravishda Bridge atrofida qurilgan — JavaScript muhiti va native kod o‘rtasidagi asinxron JSON kanali. 0.68 versiyasidan boshlab, Meta Bridge-ni JSI (JavaScript Interface) va Fabric bilan almashtirgan New Architecture-ni taqdim etdi. Ikkala modelni ham ko‘rib chiqamiz.

Bridge va Fabric

Bridge — bu bir nechta iplarda ishlaydigan seriyalashtirilgan JSON protokoli: JS Thread (React kodini interpretatsiya qilish), Main Thread (UI) va Native Modules Thread (API). JS va native kod o‘rtasidagi har bir o‘zaro ta’sir obyektlarni seriyalashtirish va deseriyalashtirishdan o‘tadi, bu tez-tez chaqiruvlarda kechikishlarga olib keladi. 1000 elementli ro‘yxatni aylantirishda Bridge soniyada 10 000 gacha JSON xabarini yaratadi.

Fabric — React Native-da yangi render tizimi. Bridge o‘rniga Fabric JSI orqali UI ip bilan sinxronlanadigan C++ Shadow Tree-dan foydalanadi. Bu JSON seriyalashtirishni yo‘q qiladi: native C++ kodi to‘g‘ridan-to‘g‘ri JavaScript muhitidagi funksiyalarni chaqiradi va aksincha. Fabric render kechikishini 16 ms (Bridge) dan 2–4 ms gacha qisqartiradi.

TurboModules — New Architecture-ning ikkinchi qismi. Eski modelda barcha native modullar ilova ishga tushganda yuklanardi. TurboModules modullarni dangasa (lazy loading) yuklaydi — faqat JS kodi ularni birinchi marta so‘raganida. Bu 20+ native modulli ilovalarda sovuq ishga tushirish vaqtini 40 foizga qisqartiradi.

React Native-da ilova namunasi

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;

Native modullar

Native modullar — bu JavaScript-dan platforma API-larini chaqirish mexanizmidir. Agar funksionallik React Native-ning standart komponentlari (kamera, Bluetooth, biometriya) bilan qoplanmagan bo‘lsa, dasturchi Swift/Kotlin-da modul yozadi va uni RCTBridgeModule yoki TurboModule orqali ro‘yxatdan o‘tkazadi. Native funksiya JS-dan NativeModules.CameraModule.takePhoto() orqali chaqiriladi.

React Native akselerometr (react-native-sensors), geolokatsiya (@react-native-community/geolocation), biometriya (react-native-biometrics) va mahalliy bildirishnomalar (@notifee/react-native) uchun tayyor native modullarni taqdim etadi. Maxsus stsenariylar uchun Expo, Xcode yoki Android Studiosiz native modullar yaratish uchun soddaroq interfeys — Expo Modules API-ni taklif qiladi.

React Native afzalliklari

Katta jamoa — React Native ko‘p platformali freymvorklar orasida eng katta jamoaga ega. GitHub-da loyiha 117 000+ yulduz, 1800+ hissa qo‘shuvchiga ega. npm har hafta react-native-ni 3 million+ marta yuklab oladi. React Native haqidagi savollar Stack Overflow-dagi mobil ishlab chiqish bo‘limidagi barcha savollarning 5 foizini tashkil qiladi.

JavaScript ekotizimi — React dasturchilari vebdagi kabi bir xil vositalardan foydalanadilar: npm, Babel, ESLint, Prettier, Jest, TypeScript. Biznes mantiq veb versiya (React) va mobil ilova (React Native) o‘rtasida qayta ishlatilishi mumkin. Redux, Zustand, React Query, React Hook Form kutubxonalari ikkala platformada o‘zgarishsiz ishlaydi.

Expo — bu React Native-da ishlab chiqishni soddalashtiradigan SDK va vositalardir. Expo tayyor modullar (kamera, bildirishnomalar, xaritalar, OAuth), bulutli qurilmalar (EAS Build) va OTA yangilanishlarini (EAS Update) taqdim etadi. Expo Go ilovani Xcode va Android Studiosiz jismoniy qurilmada ishga tushirishga imkon beradi. Expo 2024 ma’lumotlariga ko‘ra, yangi React Native loyihalarining 70 foizi Expo-dan foydalanadi.

OTA yangilanishlari — Expo Update va CodePush (Microsoft) orqali mavjud funksiya. Dasturchilar JavaScript paketining yangilanishlarini App Store yoki Google Play ko‘rib chiqishidan o‘tkazmasdan to‘g‘ridan-to‘g‘ri foydalanuvchilarga yuborishlari mumkin. Bu muhim xatolarni tuzatishni 2–5 kundan (ko‘rib chiqishni kutish) 1–2 soatgacha tezlashtiradi.

TypeScript qo‘llab-quvvatlashi React Native 0.71 dan boshlab standart sifatida yoqilgan. Loyiha shabloni tsconfig.json, barcha komponentlar uchun turlar va strict mode qo‘llab-quvvatlashini o‘z ichiga oladi. Flow (Facebook-dan statik tiplash) ham qo‘llab-quvvatlanadi, ammo Meta rasmiy ravishda TypeScript-ni tavsiya qiladi. TypeScript shabloni State of React Native 2024 so‘roviga ko‘ra yangi loyihalarning 85 foizini tashkil qiladi.

Ekotizim va mashhur kutubxonalar

npm — React Native uchun asosiy paket reestri. Kutubxona qidiruvi react-native kalit so‘zi bilan filtrlanadi. O‘rnatish uchun npm install yoki yarn add ishlatiladi. React Native CLI native bog‘liqliklarni avtomatik bog‘laydi (0.60 versiyasidan). Expo loyihalari uchun o‘rnatish expo install orqali boshqariladi, u kutubxonaning mos versiyasini tanlaydi.

Asosiy kutubxonalar

@react-navigation/native — React Native-da navigatsiya uchun de-fakto standart. Kutubxona Stack Navigator (animatsiyali o‘tishlar), Tab Navigator (iOS/Android uchun pastki menyu), Drawer Navigator (yon menyu) va Material Top Tab-ni o‘z ichiga oladi. React Navigation 7.x (2024) marshrutlarning statik konfiguratsiyasi va useSyncExternalStore bilan React 18-ni to‘liq qo‘llab-quvvatlashni taqdim etdi.

react-native-reanimated — yuqori samaradorlikli animatsiyalar uchun kutubxona. Reanimated 3.x animatsiyalarni JS ipini chetlab o‘tib, UI ipida (worklet) bajaradi. Bu 100+ element animatsiyasida ham 60 FPS ni kafolatlaydi. useSharedValue, useAnimatedStyle va withSpring standart paketdagi Animated API o‘rnini egallaydi. Reanimated teginish imo-ishoralarini react-native-gesture-handler orqali boshqaradi.

@tanstack/react-query — server holatini boshqarish uchun kutubxona. React Query API javoblarini keshlaydi, tarmoq o‘zgarganda so‘rovlarni avtomatik qayta yuboradi (refetchOnReconnect) va useInfiniteQuery orqali sahifalashni qo‘llab-quvvatlaydi. 5.x versiyasi UX uchun optimistik yangilanishlarni o‘z ichiga oladi — interfeys server javobini olishdan oldin yangilanadi, so‘ngra tuzatiladi.