Jak działa architektura React Native (bridge vs nowa architektura)?

Question

Accepted Answer

React Native uruchamia kod **JavaScript** i **natywny**, które muszą się komunikować. Oryginalna architektura używała asynchronicznego **bridge**; **nowa architektura** (JSI, TurboModules, Fabric) umożliwia szybszą, synchroniczną komunikację. Zrozumienie tego wyjaśnia zachowanie i wydajność React Native.

## Oryginalna architektura: 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
```

## Nowa architektura (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.
```

## Dlaczego to ważne (praktycznie)

```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
```

## Dlaczego to ważne

Zrozumienie architektury React Native jest cenną wiedzą na poziomie senior, ponieważ **wyjaśnia zachowanie i charakterystykę wydajności React Native**, pogłębiając zdolność do rozumowania i optymalizacji aplikacji.

Fundamentalna struktura — React Native uruchamiający **wątek JS** (twój kod) i **stronę natywną** (UI, moduły natywne), które muszą się **komunikować** — jest kluczem do zrozumienia, jak React Native działa.

Zrozumienie **oryginalne architektury bridge** (gdzie JS i kod natywny komunikują się przez asynchroniczny bridge, który serializuje wiadomości do JSON i przesyła je przez bridge) wyjaśnia historyczne charakterystyki wydajności i ograniczenia React Native: komunikacja była tylko asynchroniczna, miała narzut serializacji, a bridge mógł stać się **wąskim gardłem przy dużym ruchu** (powodując jank w szybkim scrollowaniu lub animacjach przesyłających dane przez bridge) — dlatego **minimalizowanie przeciążeń bridge i uruchamianie animacji na wątkach natywnych były ważnymi optymalizacjami**, łącząc architekturę z praktycznymi radami dotyczącymi wydajności.

Zrozumienie **nowej architektury** (**JSI** umożliwiające bezpośrednie, synchroniczne wywołania JS↔native bez serializacyjnego bridge; **TurboModules** do leniwego ładowania modułów natywnych; **Fabric** dla lepszego renderowania; Codegen dla interfejsów bezpiecznych typowo) staje się coraz ważniejsze, ponieważ staje się domyślną — poprawia wydajność, zmniejsza narzut, umożliwia synchroniczne wywołania i produkuje bardziej płynny interfejs użytkownika, reprezentując znaczną ewolucję React Native.

Zrozumienie tej architektury **wyjaśnia wydajność React Native** (dlaczego bridge miał znaczenie), **informuje optymalizację** (praktyki wynikające z architektury) i wyjaśnia, jak React Native się wykonuje — przekształcając React Native z czarnej skrzynki w zrozumiały system.

Ponieważ zrozumienie architektury (bridge i nowa architektura oparta na JSI) wyjaśnia charakterystykę wydajności React Native, informuje optymalizację i odzwierciedla świadomość jej ważnej ewolucji, oraz ponieważ ta głębia podnosi się od używania React Native do jego zrozumienia, zrozumienie architektury React Native jest cenną wiedzą na poziomie senior — wyjaśniając jego zachowanie i wydajność, informując optymalizację i odzwierciedlając głębię i świadomość ewolucji platformy oczekiwaną dla ról senior React Native.