Bridge в React Native — какво е това, принцип на работа и взаимодействие

Какво е Bridge в React Native?

Bridge (Мост) — ключов архитектурен елемент на React Native, който осигурява двупосочна асинхронна връзка между JavaScript нишката, където се изпълнява бизнес логиката на приложението, и нативните нишки на iOS и Android. От пускането на React Native през 2015 г. Bridge остава единственият начин за взаимодействие на JS код с платформените API — камера, геолокация, файлова система, известия и други нативни възможности.

Архитектурата на Bridge се основава на принципа на опашка от съобщения (message queue). Когато JavaScript код извика нативен метод, заявката се сериализира в JSON низ, поставя се в опашка и се изпраща асинхронно към нативната страна. Нативният код обработва заявката, изпълнява съответната операция и изпраща резултата обратно чрез същата опашка към JS нишката. Според доклада на Meta на React Conf 2021, през Bridge преминават до 10 000 съобщения в секунда в средностатистическо приложение.

Основните нишки, участващи в работата на Bridge: JavaScript Thread (изпълнение на JS код), Native Thread (изпълнение на нативни операции) и Shadow Thread (изчисляване на оформлението с помощта на Yoga). Всяка нишка работи независимо, което осигурява отзивчивост на интерфейса — нативните анимации не се блокират от JS изчисления.

Как работи архитектурата Bridge

Bridge използва три ключови механизма за комуникация: MessageQueue, JSON сериализация и групиране на съобщения. MessageQueue е вътрешен компонент на React Native, който управлява опашката от извиквания между JS и нативната страна. Всяко извикване на нативен метод се поставя в опашка, сериализира се и се изпраща на партиди за оптимизация на производителността.

MessageQueue и сериализация

MessageQueue работи на принципа на групиране: извикванията на нативни методи се натрупват и изпращат като една група (batch) на всеки 5–15 милисекунди. Това намалява допълнителното натоварване от сериализация, тъй като няколко извиквания се опаковат в един JSON пакет. От нативната страна съобщенията се десериализират и разпределят към съответните модули.

Регистрация на модули

Нативните модули се регистрират автоматично чрез макроси или анотации. На iOS се използва макросът RCT_EXPORT_MODULE, на Android — анотацията @ReactMethod. React Native сканира регистрираните модули при стартиране на приложението и изгражда конфигурационна JSON карта на всички налични методи. Тази карта се предава на JS средата и JavaScript узнава кои методи могат да бъдат извиквани.

Поток на данни

Данните преминават следния път: JavaScript извиква NativeModules.CalendarModule.createCalendarEvent(). Методът се сериализира в JSON съобщение с идентификатор на модула, име на метода и аргументи. Съобщението попада в опашката на MessageQueue. В нативната нишка съобщението се десериализира и се предава на съответния модул. Резултатът от изпълнението се сериализира обратно и се изпраща в JS нишката като Promise или callback.

            // Извикване на нативен модул от JavaScript чрез Bridge
import { NativeModules } from 'react-native';

const CalendarModule = NativeModules.CalendarModule;

CalendarModule.createCalendarEvent('Test Event', 'Office')
  .then(eventId => {
    console.log('Създадено събитие с id:', eventId);
  })
  .catch(error => {
    console.error('Неуспешно:', error);
  });

От нативната страна на iOS модулът изглежда като Objective-C клас с макрос RCT_EXPORT_MODULE. Методът се експортира с макрос RCT_EXPORT_METHOD и React Native автоматично го регистрира в Bridge. Аргументите се предават по позиция и трябва да съответстват на поддържаните JSON типове: NSString, NSNumber, NSArray, NSDictionary, BOOL.

            // Регистрация на iOS нативен модул в Bridge
@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

Bridge има редица фундаментални ограничения на производителността. Основното от тях е задължителната асинхронност и сериализация. Всяко извикване на нативен метод превръща данните в JSON низ, което добавя закъснение и изразходва памет. За операции с големи обеми данни, като обработка на изображения или работа с видео, това се превръща в тясно място.

Разходи за сериализация

JSON сериализацията и десериализацията заемат процесорно време и памет. Всяко съобщение трябва да бъде преобразувано в низ от JS страната, предадено през моста и анализирано от нативната страна. Според тестове на Callstack (2022), сериализацията на масив от 10 000 числа чрез Bridge отнема около 30–50 милисекунди, което е неприемливо за високочестотни извиквания.

Ограничение на размера на съобщенията

Bridge не е оптимизиран за предаване на големи двоични данни. Снимки, аудио файлове и видео потоци изискват алтернативни подходи — например запис на файла на диска и предаване на пътя като низ. Това създава допълнително натоварване за четене и запис на файловата система.

• Асинхронност — Bridge не поддържа синхронни извиквания, което усложнява сценарии, изискващи незабавен отговор.
• Памет — всяко съобщение се съхранява в опашката до обработка, което може да доведе до увеличаване на потреблението на памет.
• Отстраняване на грешки — проследяването на съобщения в Bridge е затруднено, тъй като веригата на извиквания се прекъсва между нишките.

Осъзнаването на тези ограничения доведе екипа на Meta до разработването на нова архитектура за React Native, в която Bridge се заменя с JSI (JavaScript Interface) и Turbo Module. JSI позволява директно извикване на нативни методи без сериализация, което елиминира основния недостатък на Bridge.

Bridge vs Turbo Module: сравнение

Сравнението на Bridge и Turbo Module показва фундаментални разлики в архитектурните подходи. Bridge използва асинхронна опашка от съобщения с JSON сериализация, докато Turbo Module работи чрез JSI — пряк интерфейс между JavaScript и C++, който позволява синхронно извикване на нативни методи без преобразуване на данни.

Изборът между Bridge и Turbo Module зависи от версията на React Native. За проекти на React Native 0.72 и по-стари, Bridge остава основният механизъм. От React Native 0.73 нататък, Metro и новата архитектура се поддържат паралелно, позволявайки постепенна миграция. Пълният преход към Turbo Module изисква обновяване до React Native 0.76+ и активиране на новата архитектура в конфигурацията.

Пример за настройка на Native Module чрез Bridge

Нека разгледаме пълния цикъл на създаване и използване на Native Module чрез Bridge с пример за модул за работа с календар. Модулът ще създава събитие и ще връща неговия идентификатор. Този пример обхваща настройката и за двете платформи — iOS и Android.

Android модул

На Android, Native Module се създава като Java клас, наследяващ ReactContextBaseJavaModule. Анотацията @ReactMethod експортира метода в Bridge. За Promise се използва интерфейсът Promise от com.facebook.react.bridge.

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());
        }
    }
}

Регистрация и използване

Модулът се регистрира чрез @ReactModule или ръчно в пакета на приложението. React Native автоматично го открива и го добавя в Bridge. След регистрация модулът е достъпен от JavaScript чрез NativeModules.

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();
    }
}

Важно е да се отбележи, че Bridge изисква рестартиране на приложението при добавяне на нови модули, тъй като конфигурационната карта се изгражда веднъж по време на инициализация. Това го отличава от Turbo Module, който се зарежда мързеливо и поддържа горещо презареждане на модули без рестарт.