Fabric i React Native — vad är det, renderingsarkitektur och hur det fungerar

Vad är Fabric?

Fabric — är ett nytt renderingssystem för React Native som ersatte den gamla renderaren som fungerade via Shadow Thread och Bridge. I den gamla arkitekturen omfattade renderingsprocessen tre steg: JavaScript beräknade Virtual DOM, Shadow Thread (Yoga) beräknade layouten, Native Thread renderade UIView. Fabric kombinerar alla dessa steg i en enda C++-pipeline som fungerar synkront.

Utvecklingen av Fabric började 2019 som en del av initiativet Lean Core och projektet ”Ny Arkitektur”. Huvudmålet var att lösa prestandaproblem relaterade till asynkron trefasrendering. I den gamla arkitekturen krävde varje tillståndsändring tre passager genom olika trådar, vilket skapade fördröjning mellan dataändring och UI-rendering.

Fabric är baserat på konceptet med oföränderligt skuggträd (Immutable Shadow Tree). Varje nod i trädet representerar en React-komponent med dess props och tillstånd. När tillståndet ändras skapas ett nytt träd och Fabric beräknar skillnaden mellan det gamla och nya trädet och tillämpar endast nödvändiga ändringar på det ursprungliga UI:t. Detta minimerar antalet operationer med UIView/ViewGroup och förkortar renderingstiden.

Hur Shadow Tree fungerar

Shadow Tree — är grunden för Fabric. Till skillnad från den gamla arkitekturen, där Shadow Tree endast fanns på C++-sidan och var separerat från JS-trädet via asynkront Bridge, skapar Fabric en fullständigt synkroniserad hierarkisk representation av UI. Shadow Tree-noder lagrar props, tillstånd och stilar för komponenter, och Yoga beräknar layouten direkt på C++-nivå.

När en React-komponent uppdaterar sitt tillstånd skickar React Native en ny Shadow Node till Fabric. Fabric omrenderar inte hela UI:t — det använder en jämförelsealgoritm (diffing) på C++-nivå för att avgöra vilka noder som har ändrats. Endast ändrade noder skickas till ursprunglig rendering, vilket avsevärt minskar arbetsvolymen.

Trefasrendering av Fabric

Renderingsprocessen i Fabric består av tre faser som utförs synkront på C++-nivå utan trådväxling. Första fasen — Render: React anropar komponentens renderingsfunktion, som returnerar React Element Tree. Andra fasen — Commit: React Native skapar ett nytt Shadow Tree och beräknar ändringar baserat på den gamla versionen. Tredje fasen — Mount: Fabric tillämpar ändringar på det ursprungliga UI:t, skapar, uppdaterar eller tar bort UIView.

• Render — utförs på JS-tråden, skapar React Element Tree.
• Commit — C++ Shadow Tree beräknar diff och bildar muteringslistan.
• Mount — mutationer tillämpas på det ursprungliga UI:t på huvudtråden.

Alla tre faser fungerar som en enda pipeline, där data överförs via JSI utan serialisering. Detta är den viktigaste skillnaden från den gamla arkitekturen, där det fanns avbrott mellan faserna: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric vs gammal renderare: jämförelse

Jämförelsen av Fabric med den gamla renderaren visar hur betydligt React Native-arkitekturen har förändrats. Den gamla renderaren fungerade asynkront och delade upp renderingsprocessen i tre oberoende trådar. Fabric kombinerar allt i en enda C++-pipeline.

I praktiken är Fabric särskilt fördelaktigt för applikationer med frekventa UI-uppdateringar: animationer, rullning med flytande rubriker, realtidsdata. För statiska sidor (text, knappar) är skillnaden mindre märkbar. Enligt Meta:s riktmärken minskar Fabric renderingstiden för initial listladdning med 40–60%.

JSI och Fabric: ny kommunikation

JSI (JavaScript Interface) — är den viktigaste komponenten som gör Fabric möjligt. Via JSI får Fabric direkt åtkomst till JavaScript-värden utan serialisering. När React överför props till Fabric kopieras de inte via JSON — JSI överför pekare till data i JS-motorns minne.

JSI-arkitekturen tillåter Fabric att arbeta med vilken JavaScript-motor som helst — Hermes, JSC eller V8. Fabric C++-kod är inte beroende av den specifika implementeringen av JS-motorn, vilket förenklar underhåll och testning. Alla operationer med UI — skapande, uppdatering, borttagning — utförs via JSI, vilket garanterar minimal fördröjning.

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

    // Synkron prop-överföring via JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Layoutberäkning direkt via Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Tillämpa mutationer på ursprungligt UI
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Den viktigaste fördelen — synkron uppdatering. I den gamla arkitekturen uppdaterades UI via en asynkron kö: React skickade ett kommando via Bridge, Shadow Thread bearbetade layouten, Native Thread renderade. I Fabric utförs alla steg sekventiellt i en enda genomgång. Detta eliminerar race conditions och garanterar att UI:t matchar applikationens aktuella tillstånd.

Migrering till Fabric

Migrering till Fabric kräver inte omskrivning av React-komponenter — alla befintliga React Native-komponenter fortsätter att fungera. Bibliotek med ursprunglig kod (Native Module, anpassad ViewManager) kan dock kräva uppdatering. Meta rekommenderar att kontrollera kompatibiliteten för varje bibliotek innan den nya arkitekturen aktiveras.

För att aktivera Fabric i ett React Native 0.76+-projekt, ställ in flaggan newArchEnabled: true i react-native.config.js. Fabric aktiveras automatiskt tillsammans med Turbo Module. Vid problem kan Fabric inaktiveras genom att återgå till den gamla renderaren utan att ändra applikationskoden — båda arkitekturerna stöds parallellt.

// package.json — kontrollera Fabric-kompatibla bibliotek
"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"

Vid migrering är det viktigt att uppdatera alla ursprungliga bibliotek till versioner kompatibla med Fabric. Stora bibliotek som react-native-reanimated och react-native-gesture-handler stöder redan den nya arkitekturen. För bibliotek som ännu inte har uppdaterats tillhandahåller Fabric en kompatibilitetsmekanism — om ett bibliotek inte stöder Fabric växlar renderaren automatiskt till den gamla för det biblioteket.