React Native-da Bridge — bu nima, ishlash printsipi va o'zaro aloqa

React Native-da Bridge nima?

Bridge (Ko'prik) — React Native-ning asosiy arxitektura elementi bo'lib, ilovaning biznes mantiqi bajariladigan JavaScript oqimi bilan iOS va Android nativ oqimlari o'rtasida ikki tomonlama asinxron aloqani ta'minlaydi. React Native 2015-yilda chiqarilganidan beri Bridge JS kodining platforma API-lari — kamera, geolokatsiya, fayl tizimi, bildirishnomalar va boshqa nativ imkoniyatlar bilan o'zaro aloqasining yagona usuli bo'lib qoldi.

Bridge arxitekturasi xabar navbati (message queue) printsipiga asoslanadi. JavaScript kodi nativ metodni chaqirganda, so'rov JSON satriga seriyalashtiriladi, navbatga joylashtiriladi va asinxron tarzda nativ tomonga yuboriladi. Nativ kod so'rovni qayta ishlaydi, tegishli operatsiyani bajaradi va natijani xuddi shu navbat orqali JS oqimiga qaytaradi. Meta-ning React Conf 2021 hisobotiga ko'ra, o'rtacha ilovada Bridge orqali sekundiga 10 000 ta xabar o'tadi.

Bridge ishida ishtirok etadigan asosiy oqimlar: JavaScript Thread (JS kodining bajarilishi), Native Thread (nativ operatsiyalarning bajarilishi) va Shadow Thread (Yoga yordamida maketni hisoblash). Har bir oqim mustaqil ishlaydi, bu interfeysning sezgirligini ta'minlaydi — nativ animatsiyalar JS hisob-kitoblari bilan bloklanmaydi.

Bridge arxitekturasi qanday ishlaydi

Bridge aloqa uchun uchta asosiy mexanizmdan foydalanadi: MessageQueue, JSON seriyalashtirish va xabarlarni guruhlash. MessageQueue — React Native-ning ichki komponenti bo'lib, JS va nativ tomon o'rtasidagi chaqiruvlar navbatini boshqaradi. Har bir nativ metod chaqiruvi navbatga joylashtiriladi, seriyalashtiriladi va ishlashni optimallashtirish uchun guruh bo'lib yuboriladi.

MessageQueue va seriyalashtirish

MessageQueue guruhlash printsipi bilan ishlaydi: nativ metod chaqiruvlari to'planadi va har 5–15 millisekundda bir guruh (batch) sifatida yuboriladi. Bu seriyalashtirish xarajatlarini kamaytiradi, chunki bir nechta chaqiruv bir JSON paketiga joylanadi. Nativ tomonda xabarlar deseriyalashtiriladi va tegishli modullarga taqsimlanadi.

Modullarni ro'yxatdan o'tkazish

Nativ modullar makroslar yoki annotatsiyalar orqali avtomatik ro'yxatdan o'tkaziladi. iOS-da RCT_EXPORT_MODULE makrosi, Android-da @ReactMethod annotatsiyasi ishlatiladi. React Native ilova ishga tushganda ro'yxatdan o'tgan modullarni skanerlaydi va barcha mavjud metodlarning konfiguratsiya JSON xaritasini tuzadi. Bu xarita JS muhitiga uzatiladi va JavaScript qaysi metodlarni chaqirish mumkinligini bilib oladi.

Ma'lumotlar oqimi

Ma'lumotlar quyidagi yo'ldan o'tadi: JavaScript NativeModules.CalendarModule.createCalendarEvent() chaqiradi. Metod modul identifikatori, metod nomi va argumentlari bilan JSON xabariga seriyalashtiriladi. Xabar MessageQueue navbatiga tushadi. Nativ oqimda xabar deseriyalashtiriladi va tegishli modulga uzatiladi. Bajarish natijasi orqaga seriyalashtiriladi va Promise yoki callback sifatida JS oqimiga yuboriladi.

            // JavaScript-dan Bridge orqali nativ modul chaqiruvi
import { NativeModules } from 'react-native';

const CalendarModule = NativeModules.CalendarModule;

CalendarModule.createCalendarEvent('Test Event', 'Office')
  .then(eventId => {
    console.log('Yaratilgan hodisa id:', eventId);
  })
  .catch(error => {
    console.error('Muvaffaqiyatsiz:', error);
  });

Nativ tomonda iOS moduli RCT_EXPORT_MODULE makrosi bilan Objective-C sinfi sifatida ko'rinadi. Metod RCT_EXPORT_METHOD makrosi bilan eksport qilinadi va React Native uni avtomatik ravishda Bridge-da ro'yxatdan o'tkazadi. Argumentlar pozitsiya bo'yicha uzatiladi va qo'llab-quvvatlanadigan JSON turlariga mos kelishi kerak: NSString, NSNumber, NSArray, NSDictionary, BOOL.

            // Bridge-da iOS Nativ Modul ro'yxatdan o'tkazish
@interface CalendarModule () RCT_EXPORT_MODULE()
@end

@implementation CalendarModule

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name
                  location:(NSString *)location
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
  NSNumber *eventId = createEvent(name, location);
  resolve(eventId);
}

@end

Bridge-ning cheklovlari va muammolari

Bridge bir qator asosiy ishlash cheklovlariga ega. Ulardan asosiysi — majburiy asinxronlik va seriyalashtirish. Har bir nativ metod chaqiruvi ma'lumotlarni JSON satriga aylantiradi, bu kechikish qo'shadi va xotira sarflaydi. Katta hajmdagi ma'lumotlar bilan operatsiyalar, masalan, tasvirlarni qayta ishlash yoki video bilan ishlash uchun bu tor joyga aylanadi.

Seriyalashtirish xarajatlari

JSON seriyalashtirish va deseriyalashtirish protsessor vaqti va xotirani talab qiladi. Har bir xabar JS tomonda satrga aylantirilishi, ko'prik orqali uzatilishi va nativ tomonda tahlil qilinishi kerak. Callstack (2022) testlariga ko'ra, Bridge orqali 10 000 sonli massivni seriyalashtirish taxminan 30–50 millisekund davom etadi, bu yuqori chastotali chaqiruvlar uchun qabul qilib bo'lmaydigan daraja.

Xabar o'lchami cheklovi

Bridge katta ikkilik ma'lumotlarni uzatish uchun optimallashtirilmagan. Fotosuratlar, audiofayllar va video oqimlari muqobil yondashuvlarni talab qiladi — masalan, faylni diskka yozish va yo'lni satr sifatida uzatish. Bu fayl tizimini o'qish va yozish uchun qo'shimcha xarajatlar yaratadi.

• Asinxronlik — Bridge sinxron chaqiruvlarni qo'llab-quvvatlamaydi, bu darhol javob talab qiladigan stsenariylarni murakkablashtiradi.
• Xotira — har bir xabar qayta ishlanmaguncha navbatda saqlanadi, bu xotira iste'molining oshishiga olib kelishi mumkin.
• Nosozliklarni tuzatish — Bridge-da xabarlarni kuzatish qiyin, chunki chaqiruv zanjiri oqimlar o'rtasida uziladi.

Bu cheklovlarni anglash Meta jamoasini React Native-ning yangi arxitekturasini ishlab chiqishga olib keldi, unda Bridge JSI (JavaScript Interface) va Turbo Module bilan almashtiriladi. JSI nativ metodlarni to'g'ridan-to'g'ri, seriyalashtirishsiz chaqirishga imkon beradi, bu Bridge-ning asosiy kamchiligini bartaraf qiladi.

Bridge vs Turbo Module: taqqoslash

Bridge va Turbo Module taqqoslashi arxitektura yondashuvlaridagi asosiy farqlarni ko'rsatadi. Bridge JSON seriyalashtirish bilan asinxron xabar navbatidan foydalanadi, Turbo Module esa JSI — JavaScript va C++ o'rtasidagi to'g'ridan-to'g'ri interfeys orqali ishlaydi, bu ma'lumotlarni o'zgartirmasdan nativ metodlarni sinxron chaqirishga imkon beradi.

Bridge va Turbo Module o'rtasidagi tanlov React Native versiyasiga bog'liq. React Native 0.72 va eskiroq loyihalar uchun Bridge asosiy mexanizm bo'lib qoladi. React Native 0.73 dan boshlab, Metro va yangi arxitektura parallel ravishda qo'llab-quvvatlanadi, bosqichma-bosqich migratsiyaga imkon beradi. Turbo Module-ga to'liq o'tish React Native 0.76+ ga yangilash va konfiguratsiyada yangi arxitekturani yoqishni talab qiladi.

Bridge orqali Native Module sozlash namunasi

Keling, taqvim bilan ishlash moduli misolida Bridge orqali Native Module yaratish va ishlatishning to'liq siklini ko'rib chiqaylik. Modul hodisa yaratadi va uning identifikatorini qaytaradi. Bu misol ikkala platforma — iOS va Android uchun sozlamani o'z ichiga oladi.

Android moduli

Android-da Native Module ReactContextBaseJavaModule dan meros oladigan Java sinfi sifatida yaratiladi. @ReactMethod annotatsiyasi metodni Bridge-ga eksport qiladi. Promise uchun com.facebook.react.bridge dan Promise interfeysi ishlatiladi.

public class CalendarModule extends ReactContextBaseJavaModule {

    @Override
    public String getName() {
        return "CalendarModule";
    }

    @ReactMethod
    public void createCalendarEvent(
            String name,
            String location,
            Promise promise) {
        try {
            Integer eventId = createCalendarEventNative(name, location);
            promise.resolve(eventId);
        } catch (Exception e) {
            promise.reject("EVENT_ERROR", e.getMessage());
        }
    }
}

Ro'yxatdan o'tkazish va ishlatish

Modul @ReactModule orqali yoki qo'lda ilova paketida ro'yxatdan o'tkaziladi. React Native uni avtomatik aniqlaydi va Bridge-ga qo'shadi. Ro'yxatdan o'tkazilgandan so'ng, modul JavaScript-dan NativeModules orqali mavjud bo'ladi.

public class CalendarPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        return Arrays.asList(
            new CalendarModule(reactContext)
        );
    }

    @Override
    public List<ViewManager> createViewManagers(
            ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Shuni ta'kidlash muhimki, Bridge yangi modullar qo'shilganda ilovani qayta ishga tushirishni talab qiladi, chunki konfiguratsiya xaritasi inicializatsiya vaqtida bir marta quriladi. Bu uni dangasa yuklanadigan va modullarni qayta ishga tushirmasdan hot-reload-ni qo'llab-quvvatlaydigan Turbo Module dan farqlaydi.