Как работает архитектура React Native (bridge в сравнении с новой архитектурой)?

Question

Accepted Answer

React Native запускает **JavaScript** и **native** код, которые должны взаимодействовать. Исходная архитектура использовала асинхронный **bridge**; **новая архитектура** (JSI, TurboModules, Fabric) обеспечивает более быструю синхронную коммуникацию. Понимание этого объясняет поведение и производительность React Native.

## Исходная архитектура: bridge

```text
React Native runs:
  → a JS THREAD (your React/JS code) and the NATIVE side (UI, native modules)
  → they communicate over a BRIDGE: messages are SERIALIZED (to JSON), passed ASYNC,
    and deserialized on the other side
Limitations:
  ✗ ASYNCHRONOUS only (can't call native synchronously)
  ✗ SERIALIZATION overhead; the bridge can be a BOTTLENECK with heavy traffic
  ✗ e.g. fast scrolling/animations passing data over the bridge → jank
```

## Новая архитектура (JSI, TurboModules, Fabric)

```text
The NEW ARCHITECTURE replaces the bridge:
  JSI (JavaScript Interface) → JS can call native code DIRECTLY and SYNCHRONOUSLY
    (no serialization bridge) → much faster JS↔native interop
  TURBOMODULES → native modules loaded lazily, via JSI (faster, on-demand)
  FABRIC → the new rendering system → better, more efficient UI rendering; sync layout
  CODEGEN → type-safe JS↔native interfaces
→ Result: better performance, less overhead, synchronous calls, smoother UI.
```

## Почему это важно (практически)

```text
→ Explains React Native's PERFORMANCE characteristics (why bridge traffic was costly)
→ The new architecture (default in recent RN) improves performance and interop
→ Informs optimization (minimize bridge crossings on the old architecture; native-thread
  animations) and understanding of how RN executes
```

## Почему это важно

Понимание архитектуры React Native — это ценные знания уровня senior, так как это **объясняет поведение и характеристики производительности React Native**, углубляя способность рассуждать об оптимизации приложений.

Фундаментальная структура — React Native, запускающий **JS thread** (ваш код) и **native side** (UI, native модули), которые должны **взаимодействовать** — это ключ к пониманию того, как работает React Native.

Понимание **исходной bridge архитектуры** (где JS и native взаимодействуют через асинхронный bridge, который сериализует сообщения в JSON и передает их) объясняет исторические характеристики производительности и ограничения React Native: коммуникация была только асинхронной, имела overhead сериализации, и bridge мог стать **узким местом при интенсивном трафике** (вызывая jank при быстрой прокрутке или анимациях с передачей данных) — что **объясняет, почему минимизация bridge crossings и запуск анимаций на native thread были важными оптимизациями**, связывая архитектуру с практическими советами по производительности.

Понимание **новой архитектуры** (**JSI** позволяющий прямые синхронные вызовы JS↔native без сериализации bridge; **TurboModules** для ленивой загрузки native модулей; **Fabric** для лучшего рендеринга; Codegen для типобезопасных интерфейсов) становится все более важным, так как это становится стандартом — это улучшает производительность, снижает overhead, позволяет синхронные вызовы и создает более гладкий UI, представляя значительную эволюцию React Native.

Понимание этой архитектуры **объясняет производительность React Native** (почему bridge имел значение), **информирует оптимизацию** (практики, которые следуют из архитектуры), и уясняет, как выполняется React Native — преобразуя React Native из черного ящика в понятную систему.

Поскольку понимание архитектуры (bridge и новой JSI-базированной архитектуры) объясняет характеристики производительности React Native, информирует оптимизацию и отражает осведомленность о его важной эволюции, и поскольку эта глубина возвышает от использования React Native к его пониманию, понимание архитектуры React Native — это ценные знания уровня senior, объясняющие его поведение и производительность, информирующие оптимизацию и отражающие глубину и осведомленность об эволюции платформы, ожидаемые для senior ролей React Native.