Hvordan fungerer React Natives arkitektur (bridge vs ny arkitektur)?

Question

Accepted Answer

React Native kører **JavaScript** og **native** kode, som skal kommunikere med hinanden. Den oprindelige arkitektur brugte en asynkron **bridge**; den **nye arkitektur** (JSI, TurboModules, Fabric) muliggør hurtigere, synkron kommunikation. At forstå dette præciserer React Natives opførsel og ydeevne.

## Den oprindelige arkitektur: bridge'en

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

## Den nye arkitektur (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.
```

## Hvorfor det betyder noget (praktisk)

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

## Hvorfor det betyder noget

At forstå React Natives arkitektur er værdifuld senior-niveau viden, fordi det **forklarer React Natives opførsel og ydelsekarakteristika**, hvilket uddyber muligheden for at ræsonnere om og optimere apps.

Den fundamentale struktur — React Native kører en **JS-tråd** (din kode) og **native-siden** (UI, native moduler), som skal **kommunikere** — er nøglen til at forstå, hvordan React Native fungerer.

At forstå den **oprindelige bridge-arkitektur** (hvor JS og native kommunikerer via en asynkron bridge, der serialiserer meddelelser til JSON og sender dem over) forklarer React Natives historiske ydelsekarakteristika og begrænsninger: kommunikation var kun asynkron, havde serialiseringsomkostninger, og bridge'en kunne blive en **flaskehals med tung trafik** (hvilket forårsagede jank ved hurtig rulning eller animationer, der sender data over bridge'en) — hvilket er **hvorfor minimering af bridge-krydsninger og kørsel af animationer på native-tråden var vigtige optimeringer**, forbindelsen mellem arkitektur og praktisk ydelseråd.

At forstå den **nye arkitektur** (**JSI** muliggør direkte, synkron JS↔native-kald uden serialiserings-bridge'en; **TurboModules** til lazy loading af native moduler; **Fabric** til bedre rendering; Codegen for type-sikre interfaces) bliver stadig vigtigere, da det bliver standarden — det forbedrer ydeevnen, reducerer overhead, muliggør synkrone kald og producerer smoothere UI, hvilket repræsenterer React Natives betydningsfulde udvikling.

At forstå denne arkitektur **forklarer React Natives ydeevne** (hvorfor bridge'en betød noget), **informerer optimering** (de praksisser, der følger af arkitekturen), og præciserer, hvordan React Native udfører — transformerer React Native fra en sort boks til et forståeligt system.

Da forståelse af arkitekturen (bridge'en og den nye JSI-baserede arkitektur) forklarer React Natives ydelsekarakteristika, informerer optimering, og afspejler bevidsthed om dens vigtige udvikling, og da denne dybde løfter en fra at bruge React Native til at forstå det, er forståelse af React Natives arkitektur værdifuld senior-niveau viden — forklarer dens opførsel og ydeevne, informerer optimering, og afspejler dybden og bevidstheden om platform-udvikling, som forventes for senior React Native-roller.