React Native’de Fabric — nedir, render mimarisi ve nasıl çalışır

Fabric nedir?

Fabric, Shadow Thread ve Bridge aracılığıyla çalışan eski renderer’ın yerini alan, React Native için yeni bir render sistemidir. Eski mimaride render süreci üç adımdan oluşuyordu: JavaScript Virtual DOM’u hesaplar, Shadow Thread (Yoga) düzeni hesaplar, Native Thread UIView’i çizer. Fabric tüm bu adımları senkron olarak çalışan tek bir C++ pipeline’ında birleştirir.

Fabric’in geliştirilmesi 2019 yılında Lean Core girişimi ve “The New Architecture” projesinin bir parçası olarak başladı. Ana hedef, asenkron üç turlu render ile ilgili performans sorunlarını çözmekti. Eski mimaride, her durum değişikliği farklı thread’ler aracılığıyla üç geçiş gerektiriyor ve veri değişikliği ile UI render arasında gecikme yaratıyordu.

Fabric, Değişmez Shadow Tree (Immutable Shadow Tree) kavramına dayanır. Ağacın her düğümü, props ve durumuyla birlikte bir React bileşenini temsil eder. Durum değiştiğinde yeni bir ağaç oluşturulur ve Fabric eski ve yeni ağaç arasındaki farkı hesaplayarak yalnızca gerekli değişiklikleri native UI’ya uygular. Bu, UIView/ViewGroup işlem sayısını en aza indirir ve render süresini kısaltır.

Shadow Tree nasıl çalışır

Shadow Tree, Fabric’in çalışmasının temelidir. Shadow Tree’nin yalnızca C++ tarafında var olduğu ve asenkron Bridge aracılığıyla JS ağacından ayrıldığı eski mimarinin aksine Fabric, UI’nun tamamen senkronize edilmiş hiyerarşik bir temsilini oluşturur. Shadow Tree düğümleri bileşenlerin props, durum ve stillerini depolar, Yoga ise düzeni doğrudan C++ seviyesinde hesaplar.

Bir React bileşeni durumunu güncellediğinde, React Native Fabric’e yeni bir Shadow Node gönderir. Fabric, tüm UI’yı yeniden render etmez — hangi düğümlerin değiştiğini belirlemek için C++ seviyesinde bir fark algoritması (diffing) kullanır. Yalnızca değişen düğümler native render için gönderilir, bu da iş yükünü önemli ölçüde azaltır.

Fabric’in üç aşamalı renderı

Fabric’deki render süreci, thread değiştirme olmadan C++ seviyesinde senkron olarak yürütülen üç aşamadan oluşur. İlk aşama Render’dır: React, bir React Element Tree döndüren bileşenin render işlevini çağırır. İkinci aşama Commit’dir: React Native yeni bir Shadow Tree oluşturur ve eski sürüme dayalı olarak değişiklikleri hesaplar. Üçüncü aşama Mount’tur: Fabric, değişiklikleri native UI’ya uygulayarak UIViews oluşturur, günceller veya siler.

• Render — JS thread’inde yürütülür, bir React Element Tree oluşturur.
• Commit — C++ Shadow Tree farkı hesaplar ve bir mutasyon listesi oluşturur.
• Mount — mutasyonlar ana thread’de native UI’ya uygulanır.

Üç aşamanın tümü, verilerin serileştirme olmadan JSI aracılığıyla aktarıldığı tek bir pipeline olarak çalışır. Bu, aşamalar arasında boşlukların olduğu eski mimariye göre önemli bir farktır: JS → (JSON) → Shadow Thread → (düzen) → Native Thread.

Fabric vs eski renderer: karşılaştırma

Fabric’in eski renderer ile karşılaştırması, React Native mimarisinin ne kadar önemli ölçüde değiştiğini gösterir. Eski renderer asenkron olarak çalışır ve render sürecini üç bağımsız thread’e bölerdi. Fabric her şeyi tek bir C++ pipeline’ında birleştirir.

Pratikte Fabric, özellikle sık UI güncellemeleri olan uygulamalar için faydalıdır: animasyonlar, kayan başlıklı kaydırmalar, gerçek zamanlı veriler. Statik sayfalar (metin, düğmeler) için fark daha az belirgindir. Meta benchmarklarına göre Fabric, liste başlatma render süresini %40–60 oranında azaltır.

JSI ve Fabric: yeni iletişim

JSI (JavaScript Interface), Fabric’i mümkün kılan anahtar bileşendir. JSI aracılığıyla Fabric, serileştirme olmadan JavaScript değerlerine doğrudan erişim sağlar. React, Fabric’e props gönderdiğinde, bunlar JSON aracılığıyla kopyalanmaz — JSI, JS motorunun belleğindeki verilere işaretçiler gönderir.

JSI mimarisi, Fabric’in herhangi bir JavaScript motoruyla çalışmasına olanak tanır — Hermes, JSC veya V8. Fabric C++ kodu belirli bir JS motoru uygulamasına bağlı değildir, bu da bakım ve testi basitleştirir. Tüm UI işlemleri — oluşturma, güncelleme, silme — JSI aracılığıyla gerçekleştirilir ve minimum gecikme sağlanır.

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

    // JSI aracılığıyla senkron prop aktarımı
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Yoga aracılığıyla doğrudan düzen hesaplaması
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Native UI’ya mutasyonları uygula
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Temel avantaj senkron güncellemedir. Eski mimaride UI, asenkron bir kuyruk aracılığıyla güncelleniyordu: React Bridge aracılığıyla bir komut gönderir, Shadow Thread düzeni işler, Native Thread render ederdi. Fabric’de tüm adımlar tek bir geçişte sıralı olarak yürütülür. Bu, yarış koşullarını ortadan kaldırır ve UI’nın uygulamanın mevcut durumuyla eşleşmesini sağlar.

Fabric’e geçiş

Fabric’e geçiş, React bileşenlerinin yeniden yazılmasını gerektirmez — mevcut tüm React Native bileşenleri çalışmaya devam eder. Ancak, native kodlu (Native Module, özel ViewManager) kütüphaneler güncelleme gerektirebilir. Meta, yeni mimariyi etkinleştirmeden önce her kütüphanenin uyumluluğunun kontrol edilmesini önerir.

React Native 0.76+ projesinde Fabric’i etkinleştirmek için react-native.config.js dosyasında newArchEnabled: true bayrağını ayarlayın. Fabric, Turbo Module ile birlikte otomatik olarak etkinleşecektir. Sorun çıkarsa, uygulama kodunu değiştirmeden eski renderer’a dönerek Fabric devre dışı bırakılabilir — her iki mimari de paralel olarak desteklenir.

// package.json — Fabric uyumlu kütüphaneleri kontrol et
"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"

Geçiş sırasında tüm native kütüphaneleri Fabric ile uyumlu sürümlere güncellemek önemlidir. react-native-reanimated ve react-native-gesture-handler gibi büyük kütüphaneler zaten yeni mimariyi desteklemektedir. Henüz güncellenmemiş kütüphaneler için Fabric bir uyumluluk mekanizması sağlar — bir kütüphane Fabric’i desteklemiyorsa, renderer otomatik olarak o kütüphane için eskiye döner.