Fabric v React Native — co to je, architektura vykreslování a jak funguje

Co je Fabric?

Fabric — je nový systém vykreslování pro React Native, který nahradil starý renderer pracující přes Shadow Thread a Bridge. Ve staré architektuře proces vykreslování zahrnoval tři kroky: JavaScript vypočítával Virtual DOM, Shadow Thread (Yoga) vypočítával rozložení, Native Thread vykresloval UIView. Fabric spojuje všechny tyto kroky do jednoho C++ potrubí pracujícího synchronně.

Vývoj Fabric začal v roce 2019 jako součást iniciativy Lean Core a projektu „Nová Architektura“. Hlavním cílem bylo vyřešit problémy s výkonem související s asynchronním třífázovým vykreslováním. Ve staré architektuře každá změna stavu vyžadovala tři průchody různými vlákny, což vytvářelo zpoždění mezi změnou dat a vykreslením UI.

Fabric je založen na konceptu neměnného stínového stromu (Immutable Shadow Tree). Každý uzel stromu představuje React komponentu s jeho props a stavem. Při změně stavu se vytvoří nový strom a Fabric vypočítá rozdíl mezi starým a novým stromem a aplikuje pouze potřebné změny na nativní UI. To minimalizuje počet operací s UIView/ViewGroup a zkracuje dobu vykreslování.

Jak funguje Shadow Tree

Shadow Tree — je základem fungování Fabric. Na rozdíl od staré architektury, kde Shadow Tree existoval pouze na straně C++ a byl oddělen od JS stromu asynchronním Bridge, Fabric vytváří plně synchronizovanou hierarchickou reprezentaci UI. Uzly Shadow Tree ukládají props, stav a styly komponent a Yoga vypočítává rozložení přímo na úrovni C++.

Když React komponenta aktualizuje svůj stav, React Native odešle nový Shadow Node do Fabric. Fabric nepřekresluje celé UI — používá srovnávací algoritmus (diffing) na úrovni C++ k určení, které uzly se změnily. Pouze změněné uzly jsou odeslány k nativnímu vykreslování, což výrazně snižuje objem práce.

Třífázové vykreslování Fabric

Proces vykreslování v Fabric sestává ze tří fází, které se provádějí synchronně na úrovni C++ bez přepínání vláken. První fáze — Render: React volá vykreslovací funkci komponenty, která vrací React Element Tree. Druhá fáze — Commit: React Native vytváří nový Shadow Tree a vypočítává změny na základě staré verze. Třetí fáze — Mount: Fabric aplikuje změny na nativní UI, vytváří, aktualizuje nebo odstraňuje UIView.

• Render — provádí se na JS vlákně, vytváří React Element Tree.
• Commit — C++ Shadow Tree vypočítává diff a tvoří seznam mutací.
• Mount — mutace se aplikují na nativní UI na hlavním vlákně.

Všechny tři fáze fungují jako jedno potrubí, kde jsou data přenášena přes JSI bez serializace. To je klíčový rozdíl oproti staré architektuře, kde mezi fázemi docházelo k přerušením: JS → (JSON) → Shadow Thread → (rozložení) → Native Thread.

Fabric vs starý renderer: srovnání

Srovnání Fabric se starým rendererem ukazuje, jak výrazně se architektura React Native změnila. Starý renderer pracoval asynchronně, rozděloval proces vykreslování do tří nezávislých vláken. Fabric spojuje vše do jednoho C++ potrubí.

V praxi je Fabric obzvláště výhodný pro aplikace s častými aktualizacemi UI: animace, rolování s plovoucími hlavičkami, data v reálném čase. Pro statické stránky (text, tlačítka) je rozdíl méně patrný. Podle benchmarků Meta Fabric zkracuje dobu vykreslování počátečního načtení seznamu o 40–60%.

JSI a Fabric: nová komunikace

JSI (JavaScript Interface) — je klíčová součást, která umožňuje Fabric. Prostřednictvím JSI získává Fabric přímý přístup k hodnotám JavaScriptu bez serializace. Když React předává props do Fabric, nekopírují se přes JSON — JSI předává ukazatele na data v paměti JS enginu.

Architektura JSI umožňuje Fabric pracovat s libovolným JavaScript enginem — Hermes, JSC nebo V8. C++ kód Fabric není závislý na konkrétní implementaci JS enginu, což zjednodušuje údržbu a testování. Všechny operace s UI — vytváření, aktualizace, mazání — se provádějí přes JSI, což zaručuje minimální zpoždění.

// C++ renderovací potrubí Fabric přes JSI
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // Synchronní přenos props přes JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Výpočet rozložení přímo přes Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Aplikace mutací na nativní UI
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Klíčová výhoda — synchronní aktualizace. Ve staré architektuře bylo UI aktualizováno prostřednictvím asynchronní fronty: React odeslal příkaz přes Bridge, Shadow Thread zpracoval rozložení, Native Thread vykreslil. Ve Fabric jsou všechny kroky prováděny sekvenčně v jednom průchodu. To eliminuje race conditions a zaručuje, že UI odpovídá aktuálnímu stavu aplikace.

Migrace na Fabric

Migrace na Fabric nevyžaduje přepisování React komponent — všechny stávající React Native komponenty nadále fungují. Nicméně knihovny s nativním kódem (Native Module, vlastní ViewManager) mohou vyžadovat aktualizaci. Meta doporučuje kontrolu kompatibility každé knihovny před zapnutím nové architektury.

Pro zapnutí Fabric v projektu React Native 0.76+ nastavte příznak newArchEnabled: true v react-native.config.js. Fabric se zapne automaticky spolu s Turbo Module. V případě problémů lze Fabric vypnout návratem ke starému rendereru bez změny kódu aplikace — obě architektury jsou podporovány paralelně.

// package.json — zkontrolujte knihovny kompatibilní s Fabric
"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"

Při migraci je důležité aktualizovat všechny nativní knihovny na verze kompatibilní s Fabric. Velké knihovny, jako react-native-reanimated a react-native-gesture-handler, již podporují novou architekturu. Pro knihovny, které ještě nebyly aktualizovány, Fabric poskytuje mechanismus kompatibility — pokud knihovna nepodporuje Fabric, renderer automaticky přepne na starý pro tuto knihovnu.