Hogyan működik a React Native architektúrája (bridge vs új architektúra)?

Question

Accepted Answer

A React Native **JavaScript** és **natív** kódot futtat, amelyeknek kommunikálniuk kell egymással. Az eredeti architektúra egy aszinkron **bridge**-et használt; az **új architektúra** (JSI, TurboModules, Fabric) gyorsabb, szinkron kommunikációt tesz lehetővé. Ennek megértése tisztázza a React Native viselkedését és teljesítményét.

## Az eredeti architektúra: a 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
```

## Az új architektúra (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.
```

## Miért számít (gyakorlatilag)

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

## Miért számít

A React Native architektúrájának megértése értékes senior szintű tudás, mert **megmagyarázza a React Native viselkedését és teljesítményt jellemzőit**, így mélyebben képes az alkalmazások működésére gondolkodni és azokat optimalizálni.

Az alapvető struktúra — a React Native egy **JS szál**on (az Ön kódja) és a **natív oldalon** (UI, natív modulok) fut, amelyeknek **kommunikálniuk kell** — ez a kulcs a React Native működésének megértéséhez.

Az **eredeti bridge architektúra** megértése (ahol a JS és a natív kód egy aszinkron bridge-en kommunikál, amely az üzeneteket JSON-ra szerializálja és átviszi őket) magyarázza a React Native történelmi teljesítményre vonatkozó jellemzőit és korlátait: a kommunikáció csak aszinkron volt, szerializálási túlsúlya volt, és a bridge szűk keresztmetszetté válhatott nagy forgalom esetén (amely az adatokat átvinni próbáló gyors görgetéskor vagy animációk alatt hibajeleket okozhat) — éppen **ezért volt fontos a bridge keresztezésének minimalizálása és az animációk natív szálon való futtatása, amely az architektúrát gyakorlati teljesítmény tanácshoz köti**.

Az **új architektúra** megértése (**JSI** lehetővé teszi a közvetlen, szinkron JS↔natív hívásokat szerializálás bridge nélkül; **TurboModules** a natív modulok lusta betöltésére; **Fabric** a jobb rendereléshez; Codegen a típusbiztos interfészekhez) egyre fontosabbá válik, ahogy ez az alapértelmezés lesz — javítja a teljesítményt, csökkenti a túlsúlyt, lehetővé teszi a szinkron hívásokat és gördülékenyebb felhasználói felületet hoz létre, amely a React Native jelentős fejlődését képviseli.

Ennek az architektúrának a megértése **megmagyarázza a React Native teljesítményét** (miért számított a bridge), **tájékoztatja az optimalizálást** (az architektúrából következő gyakorlatokat), és tisztázza, hogyan végzi el a React Native a végrehajtást — így a React Native a fekete dobozból értelmezhetővé válik.

Mivel az architektúra megértése (a bridge és az új JSI alapú architektúra) megmagyarázza a React Native teljesítményre vonatkozó jellemzőit, tájékoztatja az optimalizálást, és tükrözi a platform fejlődésének tudatosságát, és mivel ez a mélység felemelje az embert a React Native használatából az megértéséhez, a React Native architektúrájának megértése értékes senior szintű tudás — amely megmagyarázza annak viselkedését és teljesítményét, tájékoztatja az optimalizálást, és tükrözi a senior React Native szerepekhez szükséges mélységet és tudatosságot.