Kaip veikia React Native architektūra (tiltas vs nauja architektūra)?

Question

Accepted Answer

React Native paleide **JavaScript** ir **natyvųjį** kodą, kurie turi komunikuoti. Originali architektūra naudojo asinchroninį **tiltą**; **nauja architektūra** (JSI, TurboModules, Fabric) įgalina greitesnę, sinchroninę komunikaciją. Supratimas apie tai paaiškina React Native elgesį ir našumą.

## Originali architektūra: tiltas

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

## Nauja 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.
```

## Kodėl tai svarbu (praktiškai)

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

## Kodėl tai svarbu

Supratimas apie React Native architektūrą yra vertinga aukšto lygio žinios, nes jis **paaiškina React Native elgesį ir našumo charakteristikas**, gilindamas gebėjimą suprasti ir optimizuoti programas.

Pagindinė struktūra — React Native veikiantis **JS gijas** (jūsų kodas) ir **natyvią pusę** (UI, natyvūs moduliai), kurie turi **komunikuoti** — yra pagrindinis raktas suvokti, kaip React Native veikia.

Supratimas apie **originalią tilto architektūrą** (kur JS ir natyvusis kodas komunikuoja per asinchroninį tiltą, kuris serializuoja pranešimus į JSON ir juos siunčia per tarpą) paaiškina React Native istorines našumo charakteristikas ir apribojimus: komunikacija buvo tik asinchroninė, turėjo serializavimo išlaidas, o tiltas galėjo tapti **spaustuviu didelio srauto metu** (sukeliant judrumą greitame slinkime arba animacijose, kurios perduoda duomenis per tarpą) — todėl **minimizavimas tilto kirtimų ir animacijų paleisti natyvios gijos buvo svarbios optimizacijos**, sujungdamas architektūrą su praktiniu našumo patarmu.

Supratimas apie **naują architektūrą** (**JSI** įgalinantis tiesioginius, sinchroninius JS↔natyvios komunikacijos be serializavimo tilto; **TurboModules** tiesimui natyvaus modulio mokymui; **Fabric** geresniam renderinimui; Codegen tipui saugiam sąsajoms) vis daugiau svarbus, nes jis tampa standartiniu — jis pagerina našumą, sumažina išlaidas, įgalina sinchroninius skambučius ir sukuria sklandesnę UI, atspindėdamas React Native reikšmingą evoliuciją.

Supratimas šios architektūros **paaiškina React Native našumą** (kodėl tiltas buvo svarbus), **informuoja optimizavimą** (praktikas, kurios seka iš architektūros) ir paaiškina, kaip React Native vykdomas — transformuojant React Native iš juodos dėžės į suprantamą sistemą.

Kadangi architektūros supratimas (tiltas ir nauja JSI pagrįsta architektūra) paaiškina React Native našumo charakteristikas, informuoja optimizavimą ir atspindi žinojimą apie jos svarbią evoliuciją, ir kadangi šis gilunas atidalija ją nuo React Native naudojimo prie jo supratimo, React Native architektūros supratimas yra vertinga aukšto lygio žinios — paaiškindama jos elgesį ir našumą, informuodama optimizavimą ir atspindint giluną bei žinojimą apie platformos evoliuciją, tikėtiną aukšto lygio React Native vaidmenims.