Fabric în React Native — ce este, arhitectura de randare și cum funcționează

Ce este Fabric?

Fabric — este un nou sistem de randare pentru React Native care a înlocuit vechiul renderer care funcționa prin Shadow Thread și Bridge. În arhitectura veche, procesul de randare includea trei pași: JavaScript calcula Virtual DOM, Shadow Thread (Yoga) calcula layout-ul, Native Thread renderiza UIView. Fabric combină toți acești pași într-o singură conductă C++ care funcționează sincron.

Dezvoltarea Fabric a început în 2019 ca parte a inițiativei Lean Core și a proiectului „Arhitectura Nouă". Scopul principal a fost rezolvarea problemelor de performanță legate de randarea asincronă în trei faze. În arhitectura veche, fiecare schimbare de stare necesita trei treceri prin fire diferite, ceea ce crea o întârziere între modificarea datelor și randarea UI.

Fabric se bazează pe conceptul de arbore umbră imuabil (Immutable Shadow Tree). Fiecare nod al arborelui reprezintă o componentă React cu props-urile și starea sa. La modificarea stării, se creează un nou arbore, iar Fabric calculează diferența dintre arborele vechi și cel nou și aplică doar modificările necesare UI-ului nativ. Acest lucru minimizează numărul de operații cu UIView/ViewGroup și reduce timpul de randare.

Cum funcționează Shadow Tree

Shadow Tree — este baza funcționării Fabric. Spre deosebire de arhitectura veche, unde Shadow Tree exista doar pe partea C++ și era separat de arborele JS prin Bridge asincron, Fabric creează o reprezentare ierarhică complet sincronizată a UI. Nodurile Shadow Tree stochează props-urile, starea și stilurile componentelor, iar Yoga calculează layout-ul direct la nivel C++.

Când o componentă React își actualizează starea, React Native trimite un nou Shadow Node către Fabric. Fabric nu re-renderează întregul UI — folosește un algoritm de comparare (diffing) la nivel C++ pentru a determina care noduri s-au schimbat. Doar nodurile modificate sunt trimise la randarea nativă, ceea ce reduce semnificativ volumul de lucru.

Randarea în trei faze a Fabric

Procesul de randare în Fabric constă din trei faze care se execută sincron la nivel C++ fără comutarea firelor. Prima fază — Render: React apelează funcția de randare a componentului, care returnează React Element Tree. A doua fază — Commit: React Native creează un nou Shadow Tree și calculează modificările pe baza versiunii vechi. A treia fază — Mount: Fabric aplică modificările în UI-ul nativ, creând, actualizând sau ștergând UIView.

• Render — se execută pe firul JS, creează React Element Tree.
• Commit — Shadow Tree în C++ calculează diferența și formează lista de mutații.
• Mount — mutațiile se aplică în UI-ul nativ pe firul principal.

Toate cele trei faze funcționează ca o singură conductă, unde datele sunt transmise prin JSI fără serializare. Aceasta este diferența cheie față de arhitectura veche, unde între faze existau întreruperi: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric vs rendererul vechi: comparație

Compararea Fabric cu rendererul vechi demonstrează cât de semnificativ s-a schimbat arhitectura React Native. Rendererul vechi funcționa asincron, împărțind procesul de randare în trei fire independente. Fabric combină totul într-o singură conductă C++.

În practică, Fabric este deosebit de avantajos pentru aplicațiile cu actualizări frecvente ale UI: animații, derulări cu anteturi plutitoare, date în timp real. Pentru paginile statice (text, butoane) diferența este mai puțin vizibilă. Conform benchmark-urilor Meta, Fabric reduce timpul de randare al încărcării inițiale a listei cu 40–60%.

JSI și Fabric: noua comunicare

JSI (JavaScript Interface) — este componenta cheie care face posibil Fabric. Prin JSI, Fabric obține acces direct la valorile JavaScript fără serializare. Când React transmite props-uri către Fabric, acestea nu sunt copiate prin JSON — JSI transmite pointeri către datele din memoria motorului JS.

Arhitectura JSI permite Fabric să funcționeze cu orice motor JavaScript — Hermes, JSC sau V8. Codul C++ al Fabric nu depinde de implementarea specifică a motorului JS, ceea ce simplifică întreținerea și testarea. Toate operațiile cu UI — creare, actualizare, ștergere — se execută prin JSI, ceea ce garantează o întârziere minimă.

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

    // Transferul sincron al proprietăților prin JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Calcularea layout-ului direct prin Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Aplicarea mutațiilor în UI-ul nativ
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Avantajul cheie — actualizarea sincronă. În arhitectura veche, UI era actualizat printr-o coadă asincronă: React trimitea comanda prin Bridge, Shadow Thread procesa layout-ul, Native Thread renderiza. În Fabric, toți pașii se execută secvențial într-o singură trecere. Acest lucru elimină condițiile de cursă și garantează că UI corespunde stării curente a aplicației.

Migrarea la Fabric

Migrarea la Fabric nu necesită rescrierea componentelor React — toate componentele existente React Native continuă să funcționeze. Cu toate acestea, bibliotecile cu cod nativ (Native Module, ViewManager personalizate) pot necesita actualizare. Meta recomandă verificarea compatibilității fiecărei biblioteci înainte de activarea noii arhitecturi.

Pentru activarea Fabric într-un proiect React Native 0.76+, setați flag-ul newArchEnabled: true în react-native.config.js. Fabric se va activa automat împreună cu Turbo Module. În caz de probleme, Fabric poate fi dezactivat, revenind la rendererul vechi fără modificarea codului aplicației — ambele arhitecturi sunt suportate în paralel.

// package.json — verificați bibliotecile compatibile cu 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"

În timpul migrării, este important să actualizați toate bibliotecile native la versiuni compatibile cu Fabric. Bibliotecile mari, cum ar fi react-native-reanimated și react-native-gesture-handler, suportă deja noua arhitectură. Pentru bibliotecile care nu au fost încă actualizate, Fabric oferă un mecanism de compatibilitate — dacă biblioteca nu suportă Fabric, rendererul comută automat la cel vechi pentru acea bibliotecă.