Cum funcționează arhitectura React Native (bridge vs noua arhitectură)?

Question

Accepted Answer

React Native rulează cod **JavaScript** și cod **nativ** care trebuie să comunice. Arhitectura originală a folosit un **bridge** asincron; **noua arhitectură** (JSI, TurboModules, Fabric) permite comunicare mai rapidă, sincronă. Înțelegerea acesteia clarifică comportamentul și performanța React Native.

## Arhitectura originală: bridge-ul

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

## Noua arhitectură (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.
```

## De ce este important (practic)

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

## De ce este important

Înțelegerea arhitecturii React Native este cunoaștere valoroasă la nivel senior, deoarece **explică comportamentul și caracteristicile de performanță ale React Native**, aprofundând capacitatea de a rationa și optimiza aplicațiile.

Structura fundamentală — React Native rulând un **JS thread** (codul dumneavoastră) și **partea nativă** (UI, module native) care trebuie să **comunice** — este cheia pentru a înțelege cum funcționează React Native.

Înțelegerea **arhitecturii originale a bridge-ului** (unde JS și codul nativ comunică printr-un bridge asincron care serializează mesaje în JSON și le transmite) explică caracteristicile și limitările istorice de performanță ale React Native: comunicarea era doar asincronă, avea overhead de serializare, iar bridge-ul putea deveni un **gâtuitor cu trafic intens** (provocând jank în scrolling rapid sau animații care transmit date peste bridge) — care este **de ce minimizarea traversării bridge-ului și rularea animațiilor pe thread-ul nativ erau optimizări importante**, conectând arhitectura la sfaturi practice de performanță.

Înțelegerea **noii arhitecturi** (**JSI** care permite apeluri directe, sincrone JS↔native fără bridge-ul de serializare; **TurboModules** pentru încărcarea leneșă a modulelor native; **Fabric** pentru redare mai bună; Codegen pentru interfețe type-safe) devine din ce în ce mai importantă, pe măsură ce devine implicit — îmbunătățește performanța, reduce overhead-ul, permite apeluri sincrone și produce UI mai fluid, reprezentând evoluție semnificativă a React Native.

Înțelegerea acestei arhitecturi **explică performanța React Native** (de ce bridge-ul era important), **informează optimizarea** (practicile care decurg din arhitectură), și clarifică cum se execută React Native — transformând React Native dintr-o cutie neagră într-un sistem ințeles.

Deoarece înțelegerea arhitecturii (bridge-ul și noua arhitectură bazată pe JSI) explică caracteristicile de performanță ale React Native, informează optimizarea, și reflectă conștientizarea evoluției sale importante, și deoarece această profunzime te ridică de la utilizarea React Native la înțelegerea acestuia, înțelegerea arhitecturii React Native este cunoaștere valoroasă la nivel senior — explicând comportamentul și performanța acestuia, informând optimizarea, și reflectând profunzimea și conștientizarea evoluției platformei așteptate pentru roluri senior React Native.