React Native-də Fabric — bu nədir, render arxitekturası və necə işləyir

Fabric nədir?

Fabric — Shadow Thread və Bridge vasitəsilə işləyən köhnə rendereri əvəz edən React Native üçün yeni render sistemidir. Köhnə arxitekturada render prosesi üç addımdan ibarət idi: JavaScript Virtual DOM-u hesablayır, Shadow Thread (Yoga) layoutu hesablayır, Native Thread UIView-i render edirdi. Fabric bütün bu addımları sinxron işləyən vahid C++ konveyerində birləşdirir.

Fabric-in inkişafı 2019-cu ildə Lean Core təşəbbüsü və «Yeni Arxitektura» layihəsi çərçivəsində başladı. Əsas məqsəd asinxron üçmərhələli renderlə bağlı performans problemlərini həll etmək idi. Köhnə arxitekturada hər bir vəziyyət dəyişikliyi müxtəlif iplər vasitəsilə üç keçid tələb edirdi ki, bu da məlumat dəyişikliyi ilə UI renderi arasında gecikmə yaradırdı.

Fabric dəyişməz kölgə ağacı (Immutable Shadow Tree) konsepsiyasına əsaslanır. Ağacın hər bir qovşağı komponenti onun xüsusiyyətləri və vəziyyəti ilə təmsil edir. Vəziyyət dəyişdikdə yeni ağac yaradılır və Fabric köhnə ilə yeni ağac arasındakı fərqi hesablayaraq yalnız zəruri dəyişiklikləri nativ UI-də tətbiq edir. Bu, UIView/ViewGroup əməliyyatlarının sayını minimuma endirir və render vaxtını qısaldır.

Shadow Tree necə işləyir

Shadow Tree — Fabric-in işinin əsasıdır. Köhnə arxitekturadan fərqli olaraq, burada Shadow Tree yalnız C++ tərəfində mövcud idi və asinxron Bridge vasitəsilə JS ağacından ayrılmışdı. Fabric tam sinxronlaşdırılmış iyerarxik UI təsvirini yaradır. Shadow Tree qovşaqları komponentlərin xüsusiyyətlərini, vəziyyətini və stillərini saxlayır, Yoga isə birbaşa C++ səviyyəsində layoutu hesablayır.

React komponenti öz vəziyyətini yenilədikdə, React Native Fabric-ə yeni Shadow Node göndərir. Fabric bütün UI-ni təkrar çəkmir — dəyişən qovşaqları müəyyən etmək üçün C++ səviyyəsində müqayisə alqoritmindən (diffing) istifadə edir. Yalnız dəyişdirilmiş qovşaqlar nativ renderə göndərilir ki, bu da iş həcmini əhəmiyyətli dərəcədə azaldır.

Fabric-in üçfazalı renderi

Fabric-də render prosesi ip dəyişdirilmədən C++ səviyyəsində sinxron şəkildə yerinə yetirilən üç fazadan ibarətdir. Birinci faza — Render: React komponentin render funksiyasını çağırır, o da React Element Tree-ni qaytarır. İkinci faza — Commit: React Native yeni Shadow Tree yaradır və köhnə versiya əsasında dəyişiklikləri hesablayır. Üçüncü faza — Mount: Fabric dəyişiklikləri nativ UI-də tətbiq edir, UIView yaradır, yeniləyir və ya silir.

• Render — JS ipində yerinə yetirilir, React Element Tree yaradır.
• Commit — C++ Shadow Tree diff hesablayır və mutasiya siyahısını formalaşdırır.
• Mount — mutasiyalar əsas ipdə nativ UI-də tətbiq olunur.

Hər üç faza serializasiya olmadan JSI vasitəsilə məlumat ötürülən vahid konveyer kimi işləyir. Bu, fazalar arasında fasilələrin olduğu köhnə arxitekturadan əsas fərqdir: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric vs köhnə renderer: müqayisə

Fabric-in köhnə rendererlə müqayisəsi React Native arxitekturasının nə qədər əhəmiyyətli dərəcədə dəyişdiyini göstərir. Köhnə renderer asinxron işləyir, render prosesini üç müstəqil ipə bölürdü. Fabric hər şeyi bir C++ konveyerində birləşdirir.

Praktikada Fabric tez-tez UI yeniləmələri olan proqramlar üçün xüsusilə faydalıdır: animasiyalar, üzən başlıqlarla sürüşdürmə, real-vaxt məlumatları. Statik səhifələr (mətn, düymələr) üçün fərq daha az nəzərə çarpır. Meta benchmarklarına görə, Fabric siyahının ilkin yükləmə render vaxtını 40–60% qısaldır.

JSI və Fabric: yeni kommunikasiya

JSI (JavaScript Interface) — Fabric-i mümkün edən əsas komponentdir. JSI vasitəsilə Fabric serializasiya olmadan JavaScript dəyərlərinə birbaşa çıxış əldə edir. React Fabric-ə xassələri ötürdükdə, onlar JSON vasitəsilə kopyalanmır — JSI JS mühərrikinin yaddaşındakı məlumatlara göstəricilər ötürür.

JSI arxitekturası Fabric-ə istənilən JavaScript mühərriki — Hermes, JSC və ya V8 ilə işləməyə imkan verir. Fabric-in C++ kodu JS mühərrikinin konkret tətbiqindən asılı deyil, bu da texniki xidməti və testləri asanlaşdırır. UI ilə bütün əməliyyatlar — yaratma, yeniləmə, silmə — JSI vasitəsilə yerinə yetirilir ki, bu da minimal gecikməyə zəmanət verir.

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

    // Sinxron xassə ötürülməsi JSI vasitəsilə
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Layoutun birbaşa Yoga vasitəsilə hesablanması
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Mutasiyaların nativ UI-də tətbiqi
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Əsas üstünlük — sinxron yeniləmədir. Köhnə arxitekturada UI asinxron növbə vasitəsilə yenilənirdi: React Bridge vasitəsilə əmr göndərirdi, Shadow Thread layoutu emal edirdi, Native Thread render edirdi. Fabric-də bütün addımlar bir keçiddə ardıcıl yerinə yetirilir. Bu, race condition-ları aradan qaldırır və UI-nin proqramın cari vəziyyətinə uyğun olmasına zəmanət verir.

Fabric-ə miqrasiya

Fabric-ə miqrasiya React komponentlərinin yenidən yazılmasını tələb etmir — bütün mövcud React Native komponentləri işləməyə davam edir. Lakin nativ kodlu kitabxanalar (Native Module, fərdi ViewManager) yeniləmə tələb edə bilər. Meta yeni arxitekturanı aktivləşdirməzdən əvvəl hər kitabxananın uyğunluğunu yoxlamağı tövsiyə edir.

React Native 0.76+ layihəsində Fabric-i aktivləşdirmək üçün react-native.config.js faylında newArchEnabled: true bayrağını qurun. Fabric Turbo Module ilə birlikdə avtomatik aktivləşəcək. Problem yarandıqda, Fabric-i söndürüb tətbiq kodunu dəyişmədən köhnə rendererə qayıda bilərsiniz — hər iki arxitektura paralel olaraq dəstəklənir.

// package.json — Fabric ilə uyğun kitabxanaları yoxlayın
"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"

Miqrasiya zamanı bütün nativ kitabxanaları Fabric ilə uyğun versiyalara yeniləmək vacibdir. react-native-reanimated və react-native-gesture-handler kimi böyük kitabxanalar artıq yeni arxitekturanı dəstəkləyir. Hələ yenilənməmiş kitabxanalar üçün Fabric uyğunluq mexanizmi təmin edir — kitabxana Fabric-i dəstəkləmirsə, renderer avtomatik olaraq bu kitabxana üçün köhnəyə keçir.