React Native-da Fabric — bu nima, render arxitekturasi va qanday ishlaydi

Fabric nima?

Fabric — bu React Native uchun yangi rendering tizimi bo'lib, Shadow Thread va Bridge orqali ishlaydigan eski rendererni almashtirdi. Eski arxitekturada rendering jarayoni uch bosqichni o'z ichiga olgan: JavaScript Virtual DOM-ni hisoblaydi, Shadow Thread (Yoga) layoutni hisoblaydi, Native Thread UIView-ni render qiladi. Fabric barcha bu bosqichlarni sinxron ishlaydigan yagona C++ konveyerida birlashtiradi.

Fabric-ning rivojlanishi 2019-yilda Lean Core tashabbusi va «Yangi Arxitektura» loyihasi doirasida boshlangan. Asosiy maqsad asinxron uch bosqichli rendering bilan bog'liq ishlash muammolarini hal qilish edi. Eski arxitekturada har bir holat o'zgarishi turli iplar orqali uchta o'tishni talab qilardi, bu esa ma'lumot o'zgarishi va UI renderingi o'rtasida kechikish yaratardi.

Fabric o'zgarmas soya daraxti (Immutable Shadow Tree) kontseptsiyasiga asoslanadi. Daraxtning har bir tuguni React komponentini uning xususiyatlari va holati bilan ifodalaydi. Holat o'zgarganda yangi daraxt yaratiladi va Fabric eski va yangi daraxt o'rtasidagi farqni hisoblab, faqat zarur o'zgarishlarni native UI-da qo'llaydi. Bu UIView/ViewGroup operatsiyalari sonini minimallashtiradi va rendering vaqtini qisqartiradi.

Shadow Tree qanday ishlaydi

Shadow Tree — Fabric ishining asosidir. Eski arxitekturadan farqli o'laroq, bu erda Shadow Tree faqat C++ tomonida mavjud edi va asinxron Bridge orqali JS daraxtidan ajratilgan edi. Fabric to'liq sinxronlashtirilgan ierarxik UI tasvirini yaratadi. Shadow Tree tugunlari komponentlarning xususiyatlari, holati va stillarini saqlaydi, Yoga esa to'g'ridan-to'g'ri C++ darajasida layoutni hisoblaydi.

React komponenti o'z holatini yangilaganda, React Native Fabric-ga yangi Shadow Node yuboradi. Fabric butun UI-ni qayta chizmaydi — o'zgargan tugunlarni aniqlash uchun C++ darajasida taqqoslash algoritmidan (diffing) foydalanadi. Faqat o'zgartirilgan tugunlar native renderingga yuboriladi, bu esa ish hajmini sezilarli darajada kamaytiradi.

Fabric-ning uch fazali renderingi

Fabric-da rendering jarayoni ipni o'zgartirmasdan C++ darajasida sinxron tarzda bajariladigan uch fazadan iborat. Birinchi faza — Render: React komponentning render funksiyasini chaqiradi, u React Element Tree-ni qaytaradi. Ikkinchi faza — Commit: React Native yangi Shadow Tree yaratadi va eski versiya asosida o'zgarishlarni hisoblaydi. Uchinchi faza — Mount: Fabric o'zgarishlarni native UI-da qo'llaydi, UIView yaratadi, yangilaydi yoki o'chiradi.

• Render — JS ipida bajariladi, React Element Tree yaratadi.
• Commit — C++ Shadow Tree diff hisoblaydi va mutatsiyalar ro'yxatini shakllantiradi.
• Mount — mutatsiyalar asosiy ipda native UI-da qo'llaniladi.

Har uch faza serializatsiyasiz JSI orqali ma'lumot uzatiladigan yagona konveyer sifatida ishlaydi. Bu fazalar o'rtasida uzilishlar bo'lgan eski arxitekturadan asosiy farqdir: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric vs eski renderer: taqqoslash

Fabric-ni eski renderer bilan taqqoslash React Native arxitekturasi qanchalik o'zgarganligini ko'rsatadi. Eski renderer asinxron ishlaydi, rendering jarayonini uchta mustaqil ipga bo'lardi. Fabric hamma narsani bitta C++ konveyerida birlashtiradi.

Amalda Fabric tez-tez UI yangilanishlari bo'lgan ilovalar uchun ayniqsa foydali: animatsiyalar, suzuvchi sarlavhalar bilan aylantirish, real-vaqt ma'lumotlari. Statik sahifalar (matn, tugmalar) uchun farq kamroq seziladi. Meta benchmarklariga ko'ra, Fabric ro'yxatning dastlabki yuklanish rendering vaqtini 40–60% ga qisqartiradi.

JSI va Fabric: yangi kommunikatsiya

JSI (JavaScript Interface) — Fabric-ni mumkin qiladigan asosiy komponentdir. JSI orqali Fabric serializatsiyasiz JavaScript qiymatlariga to'g'ridan-to'g'ri kirish imkoniyatiga ega bo'ladi. React Fabric-ga xususiyatlarni uzatganda, ular JSON orqali nusxalanmaydi — JSI JS dvigateli xotirasidagi ma'lumotlarga ko'rsatgichlarni uzatadi.

JSI arxitekturasi Fabric-ga istalgan JavaScript dvigateli — Hermes, JSC yoki V8 bilan ishlash imkonini beradi. Fabric-ning C++ kodi JS dvigatelining aniq implementatsiyasiga bog'liq emas, bu esa texnik xizmat ko'rsatish va testlashni soddalashtiradi. UI bilan barcha operatsiyalar — yaratish, yangilash, o'chirish — JSI orqali bajariladi, bu minimal kechikishni kafolatlaydi.

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

    // Xususiyatlarning sinxron uzatilishi JSI orqali
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Layoutni to'g'ridan-to'g'ri Yoga orqali hisoblash
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Mutatsiyalarni native UI-da qo'llash
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Asosiy afzallik — sinxron yangilanish. Eski arxitekturada UI asinxron navbat orqali yangilanardi: React Bridge orqali buyruq yuborardi, Shadow Thread layoutni qayta ishlardi, Native Thread render qilardi. Fabric-da barcha bosqichlar bir o'tishda ketma-ket bajariladi. Bu race condition-larni bartaraf qiladi va UI-ning ilovaning joriy holatiga mos kelishini kafolatlaydi.

Fabric-ga migratsiya

Fabric-ga migratsiya React komponentlarini qayta yozishni talab qilmaydi — barcha mavjud React Native komponentlari ishlashda davom etadi. Biroq, native kodli kutubxonalar (Native Module, maxsus ViewManager) yangilanishni talab qilishi mumkin. Meta yangi arxitektura faollashtirishdan oldin har bir kutubxonaning mosligini tekshirishni tavsiya qiladi.

React Native 0.76+ loyihasida Fabric-ni faollashtirish uchun react-native.config.js faylida newArchEnabled: true bayrog'ini o'rnating. Fabric Turbo Module bilan birga avtomatik faollashadi. Muammo yuzaga kelganda, Fabric-ni o'chirib, ilova kodini o'zgartirmasdan eski rendererga qaytishingiz mumkin — ikkala arxitektura parallel ravishda qo'llab-quvvatlanadi.

// package.json — Fabric bilan mos kutubxonalarni tekshiring
"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"

Migratsiya paytida barcha native kutubxonalarni Fabric bilan mos versiyalarga yangilash muhimdir. react-native-reanimated va react-native-gesture-handler kabi yirik kutubxonalar allaqachon yangi arxitekturadan qo'llab-quvvatlaydi. Hali yangilanmagan kutubxonalar uchun Fabric moslik mexanizmini ta'minlaydi — agar kutubxona Fabric-ni qo'llab-quvvatlamasa, renderer avtomatik ravishda bu kutubxona uchun eski usulga o'tadi.