Fabric in React Native — was es ist, Rendering-Architektur und wie es funktioniert

Was ist Fabric?

Fabric ist ein neues Rendering-System für React Native, das den alten Renderer ersetzt hat, der über Shadow Thread und Bridge arbeitete. In der alten Architektur umfasste der Rendering-Prozess drei Schritte: JavaScript berechnet das Virtual DOM, Shadow Thread (Yoga) berechnet das Layout, Native Thread zeichnet UIView. Fabric fasst all diese Schritte in einer einzigen C++-Pipeline zusammen, die synchron arbeitet.

Die Entwicklung von Fabric begann 2019 im Rahmen der Lean Core-Initiative und des Projekts „The New Architecture“. Hauptziel war die Lösung von Leistungsproblemen, die mit dem asynchronen Drei-Runden-Rendering verbunden waren. In der alten Architektur erforderte jede Statusänderung drei Durchläufe durch verschiedene Threads, was eine Verzögerung zwischen Datenänderung und UI-Rendering verursachte.

Fabric basiert auf dem Konzept des unveränderlichen Shadow Tree (Immutable Shadow Tree). Jeder Knoten des Baums repräsentiert eine React-Komponente mit ihren Props und ihrem Zustand. Wenn sich der Zustand ändert, wird ein neuer Baum erstellt, und Fabric berechnet die Differenz zwischen altem und neuem Baum und wendet nur die notwendigen Änderungen auf die native UI an. Dies minimiert die Anzahl der UIView/ViewGroup-Operationen und verkürzt die Renderzeit.

Wie funktioniert der Shadow Tree

Shadow Tree ist die Grundlage der Funktionsweise von Fabric. Anders als bei der alten Architektur, wo der Shadow Tree nur auf der C++-Seite existierte und durch die asynchrone Bridge vom JS-Baum getrennt war, erstellt Fabric eine vollständig synchronisierte hierarchische Darstellung der UI. Shadow Tree-Knoten speichern Props, Zustand und Stile der Komponenten, während Yoga das Layout direkt auf C++-Ebene berechnet.

Wenn eine React-Komponente ihren Zustand aktualisiert, sendet React Native einen neuen Shadow Node an Fabric. Fabric rendert nicht die gesamte UI neu — es verwendet einen Diffing-Algorithmus auf C++-Ebene, um zu ermitteln, welche Knoten sich geändert haben. Nur geänderte Knoten werden zum nativen Rendering gesendet, was den Arbeitsaufwand erheblich reduziert.

Drei-Phasen-Rendering von Fabric

Der Rendering-Prozess in Fabric besteht aus drei Phasen, die synchron auf C++-Ebene ohne Thread-Wechsel ausgeführt werden. Die erste Phase ist Render: React ruft die Render-Funktion der Komponente auf, die einen React Element Tree zurückgibt. Die zweite Phase ist Commit: React Native erstellt einen neuen Shadow Tree und berechnet Änderungen auf Basis der alten Version. Die dritte Phase ist Mount: Fabric wendet Änderungen auf die native UI an, erstellt, aktualisiert oder löscht UIViews.

• Render — wird auf dem JS-Thread ausgeführt, erstellt einen React Element Tree.
• Commit — der C++ Shadow Tree berechnet den Diff und erstellt eine Liste von Mutationen.
• Mount — Mutationen werden auf dem Hauptthread auf die native UI angewendet.

Alle drei Phasen arbeiten als eine einzige Pipeline, in der Daten ohne Serialisierung über JSI übertragen werden. Dies ist ein wesentlicher Unterschied zur alten Architektur, wo es Lücken zwischen den Phasen gab: JS → (JSON) → Shadow Thread → (Layout) → Native Thread.

Fabric vs alter Renderer: Vergleich

Der Vergleich von Fabric mit dem alten Renderer zeigt, wie stark sich die React Native-Architektur verändert hat. Der alte Renderer arbeitete asynchron und teilte den Rendering-Prozess auf drei unabhängige Threads auf. Fabric fasst alles in einer einzigen C++-Pipeline zusammen.

In der Praxis ist Fabric besonders vorteilhaft für Anwendungen mit häufigen UI-Updates: Animationen, Scrollen mit schwebenden Kopfzeilen, Echtzeitdaten. Bei statischen Seiten (Text, Schaltflächen) ist der Unterschied weniger auffällig. Laut Meta-Benchmarks reduziert Fabric die anfängliche Rendering-Zeit von Listen um 40–60%.

JSI und Fabric: neue Kommunikation

JSI (JavaScript Interface) ist eine Schlüsselkomponente, die Fabric ermöglicht. Über JSI erhält Fabric direkten Zugriff auf JavaScript-Werte ohne Serialisierung. Wenn React Props an Fabric übergibt, werden diese nicht über JSON kopiert — JSI übergibt Zeiger auf die Daten im Speicher der JS-Engine.

Die JSI-Architektur ermöglicht Fabric die Arbeit mit jeder JavaScript-Engine — Hermes, JSC oder V8. Der Fabric C++-Code hängt nicht von einer bestimmten JS-Engine-Implementierung ab, was Wartung und Tests vereinfacht. Alle UI-Operationen — Erstellung, Aktualisierung, Löschung — werden über JSI ausgeführt, was minimale Latenz gewährleistet.

// Fabric C++-Rendering-Pipeline via JSI
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // Synchrone Prop-Übertragung via JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Layoutberechnung direkt durch Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Mutationen auf native UI anwenden
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Der Hauptvorteil ist das synchrone Update. In der alten Architektur wurde die UI über eine asynchrone Warteschlange aktualisiert: React sendete einen Befehl über die Bridge, Shadow Thread verarbeitete das Layout, Native Thread rendert. In Fabric werden alle Schritte sequenziell in einem einzigen Durchlauf ausgeführt. Dies beseitigt Race Conditions und stellt sicher, dass die UI dem aktuellen Anwendungszustand entspricht.

Migration zu Fabric

Die Migration zu Fabric erfordert kein Umschreiben von React-Komponenten — alle vorhandenen React Native-Komponenten funktionieren weiterhin. Bibliotheken mit nativem Code (Native Module, benutzerdefinierte ViewManager) können jedoch Updates erfordern. Meta empfiehlt, die Kompatibilität jeder Bibliothek zu überprüfen, bevor die neue Architektur aktiviert wird.

Um Fabric in einem React Native 0.76+-Projekt zu aktivieren, setzen Sie das Flag newArchEnabled: true in der react-native.config.js. Fabric wird automatisch zusammen mit Turbo Module aktiviert. Bei Problemen kann Fabric deaktiviert werden, indem Sie zum alten Renderer zurückkehren, ohne den Anwendungscode zu ändern — beide Architekturen werden parallel unterstützt.

// package.json — Fabric-kompatible Bibliotheken prüfen
"react-native": "0.76.6",
"react-native-safe-area-context": "^5.0.0",
"react-native-screens": "^4.0.0",
"react-native-reanimated": "^3.16.0",
"react-native-gesture-handler": "^2.21.0"

Bei der Migration ist es wichtig, alle nativen Bibliotheken auf Fabric-kompatible Versionen zu aktualisieren. Große Bibliotheken wie react-native-reanimated und react-native-gesture-handler unterstützen bereits die neue Architektur. Für Bibliotheken, die noch nicht aktualisiert wurden, bietet Fabric einen Kompatibilitätsmechanismus — wenn eine Bibliothek Fabric nicht unterstützt, fällt der Renderer automatisch auf die alte Bibliothek zurück.