Fabric a React Native-ben — mi ez, renderelési architektúra és működése

Mi az a Fabric?

Fabric — egy új renderelő rendszer a React Native számára, amely felváltotta a Shadow Thread-en és Bridge-en keresztül működő régi renderelőt. A régi architektúrában a renderelési folyamat három lépésből állt: a JavaScript kiszámította a Virtual DOM-ot, a Shadow Thread (Yoga) kiszámította a layout-ot, a Native Thread renderelte az UIView-t. A Fabric mindezeket a lépéseket egyetlen, szinkronban működő C++-csővezetékben egyesíti.

A Fabric fejlesztése 2019-ben kezdődött a Lean Core kezdeményezés és az „Új Architektúra” projekt részeként. A fő cél az aszinkron háromfázisú rendereléssel kapcsolatos teljesítményproblémák megoldása volt. A régi architektúrában minden állapotváltozás három áthaladást igényelt különböző szálakon, ami késleltetést okozott az adatváltozás és az UI renderelése között.

A Fabric a megváltoztathatatlan árnyékfa (Immutable Shadow Tree) koncepcióján alapul. A fa minden csomópontja egy React komponenst képvisel a props-aival és állapotával. Állapotváltozáskor új fa jön létre, és a Fabric kiszámítja a különbséget a régi és az új fa között, és csak a szükséges változtatásokat alkalmazza a natív UI-ra. Ez minimalizálja az UIView/ViewGroup műveletek számát és lerövidíti a renderelési időt.

Hogyan működik a Shadow Tree

Shadow Tree — a Fabric működésének alapja. Ellentétben a régi architektúrával, ahol a Shadow Tree csak a C++ oldalon létezett, és aszinkron Bridge-en keresztül el volt választva a JS-fától, a Fabric egy teljesen szinkronizált hierachikus UI-reprezentációt hoz létre. A Shadow Tree csomópontjai tárolják a komponensek props-ait, állapotát és stílusait, a Yoga pedig közvetlenül C++ szinten számítja ki a layout-ot.

Amikor egy React komponens frissíti az állapotát, a React Native egy új Shadow Node-t küld a Fabric-nak. A Fabric nem rendereli újra a teljes UI-t — C++ szinten összehasonlító algoritmust (diffing) használ annak meghatározására, mely csomópontok változtak. Csak a módosított csomópontok kerülnek natív renderelésre, ami jelentősen csökkenti a munka mennyiségét.

A Fabric háromfázisú renderelése

A Fabric-ben a renderelési folyamat három fázisból áll, amelyek szinkronban, C++ szinten, szálváltás nélkül hajtódnak végre. Első fázis — Render: a React meghívja a komponens renderelő függvényét, amely visszaadja a React Element Tree-t. Második fázis — Commit: a React Native létrehozza az új Shadow Tree-t, és kiszámítja a változásokat a régi verzió alapján. Harmadik fázis — Mount: a Fabric alkalmazza a változásokat a natív UI-ra, létrehozva, frissítve vagy törölve az UIView-t.

• Render — a JS szálon hajtódik végre, létrehozza a React Element Tree-t.
• Commit — a C++ Shadow Tree kiszámítja a diff-et és összeállítja a mutációs listát.
• Mount — a mutációk a fő szálon a natív UI-ra kerülnek alkalmazásra.

Mindhárom fázis egyetlen csővezetékként működik, ahol az adatok JSI-n keresztül, szerializáció nélkül kerülnek továbbításra. Ez a legfontosabb különbség a régi architektúrához képest, ahol a fázisok között megszakítások voltak: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric vs régi renderelő: összehasonlítás

A Fabric összehasonlítása a régi renderelővel megmutatja, mennyire jelentősen megváltozott a React Native architektúrája. A régi renderelő aszinkron módon működött, három független szálra bontva a renderelési folyamatot. A Fabric mindent egyetlen C++-csővezetékben egyesít.

A gyakorlatban a Fabric különösen előnyös a gyakori UI-frissítésekkel rendelkező alkalmazások számára: animációk, görgetés lebegő fejlécekkel, valós idejű adatok. Statikus oldalaknál (szöveg, gombok) a különbség kevésbé észrevehető. A Meta benchmarkjai szerint a Fabric 40–60%-kal csökkenti a lista kezdeti betöltésének renderelési idejét.

JSI és Fabric: új kommunikáció

JSI (JavaScript Interface) — a kulcsfontosságú összetevő, amely lehetővé teszi a Fabric-öt. A JSI-n keresztül a Fabric közvetlen hozzáférést kap a JavaScript-értékekhez szerializáció nélkül. Amikor a React props-okat továbbít a Fabric-nak, azok nem másolódnak át JSON-on keresztül — a JSI mutatókat továbbít a JS-motor memóriájában lévő adatokhoz.

A JSI architektúrája lehetővé teszi a Fabric számára, hogy bármilyen JavaScript-motorral működjön — Hermes, JSC vagy V8. A Fabric C++ kódja nem függ a JS-motor konkrét implementációjától, ami leegyszerűsíti a karbantartást és a tesztelést. Az UI-val kapcsolatos összes művelet — létrehozás, frissítés, törlés — JSI-n keresztül történik, ami minimális késleltetést garantál.

// Fabric C++ renderelési csővezeték JSI-n keresztül
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // Props szinkron továbbítása JSI-n keresztül
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Layout számítás közvetlenül Yoga-n keresztül
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Mutációk alkalmazása a natív UI-ra
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

A legfőbb előny — szinkron frissítés. A régi architektúrában az UI aszinkron soron keresztül frissült: a React parancsot küldött a Bridge-en keresztül, a Shadow Thread feldolgozta a layout-ot, a Native Thread renderelt. A Fabric-ben minden lépés szekvenciálisan, egyetlen áthaladásban történik. Ez kiküszöböli a versenyhelyzeteket (race conditions) és garantálja, hogy az UI megfelel az alkalmazás aktuális állapotának.

Migráció a Fabric-re

A Fabric-re való migráció nem igényli a React komponensek újraírását — az összes meglévő React Native komponens továbbra is működik. Azonban a natív kóddal rendelkező könyvtárak (Native Module, egyedi ViewManager) frissítést igényelhetnek. A Meta azt javasolja, hogy az új architektúra aktiválása előtt ellenőrizze az egyes könyvtárak kompatibilitását.

A Fabric aktiválásához egy React Native 0.76+ projektben állítsa be a newArchEnabled: true jelzőt a react-native.config.js fájlban. A Fabric automatikusan aktiválódik a Turbo Module-lel együtt. Probléma esetén a Fabric kikapcsolható, visszatérve a régi renderelőhöz az alkalmazáskód módosítása nélkül — mindkét architektúra párhuzamosan támogatott.

// package.json — ellenőrizze a Fabric-kel kompatibilis könyvtárakat
"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"

A migráció során fontos az összes natív könyvtár frissítése a Fabric-kel kompatibilis verziókra. A nagy könyvtárak, mint a react-native-reanimated és a react-native-gesture-handler, már támogatják az új architektúrát. A még nem frissített könyvtárak számára a Fabric kompatibilitási mechanizmust biztosít — ha egy könyvtár nem támogatja a Fabric-öt, a renderelő automatikusan átvált a régire az adott könyvtár esetében.