Wie funktioniert die Architektur von React Native (Bridge vs. neue Architektur)?

Question

Accepted Answer

React Native führt **JavaScript**- und **native** Code aus, die kommunizieren müssen. Die ursprüngliche Architektur nutzte eine asynchrone **Bridge**; die **neue Architektur** (JSI, TurboModules, Fabric) ermöglicht schnellere, synchrone Kommunikation. Das Verständnis hierfür erklärt React Natives Verhalten und Leistung.

## Die ursprüngliche Architektur: die 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
```

## Die neue Architektur (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.
```

## Warum es wichtig ist

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

## Warum es wichtig ist

Das Verständnis der React-Native-Architektur ist wertvollles Wissen auf Senior-Level, weil es **React Natives Verhalten und Leistungsmerkmale erklärt** und die Fähigkeit vertieft, Apps zu analysieren und zu optimieren.

Die fundamentale Struktur — React Native, das einen **JS-Thread** (dein Code) und die **native Seite** (UI, native Module) ausführt, die **kommunizieren** müssen — ist der Schlüssel zum Verständnis, wie React Native funktioniert.

Das Verständnis der **ursprünglichen Bridge-Architektur** (wobei JS und Native über eine asynchrone Bridge kommunizieren, die Nachrichten zu JSON serialisiert und weitergeleitet) erklärt React Natives historische Leistungsmerkmale und Einschränkungen: Kommunikation war nur asynchron, hatte Serialisierungs-Overhead, und die Bridge konnte mit starkem Datenaufkommen zu einem **Engpass** werden (was zu Ruckeln bei schnellem Scrollen oder Animationen mit Datenaustausch führte) — **daher waren das Minimieren von Bridge-Übergängen und das Ausführen von Animationen auf dem nativen Thread wichtige Optimierungen**, die Architektur mit praktischer Leistungsoptimierung verbinden.

Das Verständnis der **neuen Architektur** (**JSI** ermöglicht direkte, synchrone JS↔Native-Aufrufe ohne die Serialisierungs-Bridge; **TurboModules** für Lazy-Loading von nativen Modulen; **Fabric** für besseres Rendering; Codegen für typsichere Interfaces) wird zunehmend wichtig, da es zum Standard wird — es verbessert die Leistung, reduziert Overhead, ermöglicht synchrone Aufrufe und erzeugt eine flüssigere UI, was React Natives bedeutende Weiterentwicklung darstellt.

Das Verständnis dieser Architektur **erklärt React Natives Leistung** (warum die Bridge wichtig war), **informiert Optimierung** (die Praktiken, die aus der Architektur folgen), und verdeutlicht, wie React Native ausgeführt wird — und transformiert React Native von einer Black Box in ein verständliches System.

Da das Verständnis der Architektur (die Bridge und die neue JSI-basierte Architektur) React Natives Leistungsmerkmale erklärt, Optimierung informiert und das Bewusstsein für seine wichtige Weiterentwicklung widerspiegelt, und da diese Tiefe einen vom Verwenden von React Native zum Verständnis erhebt, ist das Verständnis von React Natives Architektur wertvollles Senior-Level-Wissen — erklärt sein Verhalten und seine Leistung, informiert Optimierung und spiegelt die Tiefe und das Bewusstsein für die Plattformweiterentwicklung wider, die von Senior-React-Native-Rollen erwartet wird.