Fabric у React Native — шта је то, архитектура рендеровања и како ради

Шта је Fabric?

Fabric — је нови систем рендеровања за React Native који је заменио стари рендерер који је радио кроз Shadow Thread и Bridge. У старој архитектури процес рендеровања је укључивао три корака: JavaScript израчунава Virtual DOM, Shadow Thread (Yoga) израчунава распоред, Native Thread рендерује UIView. Fabric обједињује све ове кораке у јединственом C++ конвејеру који ради синхроно.

Развој Fabric-а је почео 2019. године као део иницијативе Lean Core и пројекта „Нова архитектура". Основни циљ је био решавање проблема перформанси повезаних са асинхроним трофазним рендеровањем. У старој архитектури, свака промена стања је захтевала три пролаза кроз различите нити, што је стварало кашњење између промене података и рендеровања UI.

Fabric се заснива на концепту непроменљивог сенченог стабла (Immutable Shadow Tree). Сваки чвор стабла представља React компоненту са њеним props-има и стањем. При промени стања, ствара се ново стабло, а Fabric израчунава разлику између старог и новог стабла и примењује само потребне промене на изворни UI. Ово минимизира број операција са UIView/ViewGroup и скраћује време рендеровања.

Како ради Shadow Tree

Shadow Tree — је основа рада Fabric-а. За разлику од старе архитектуре, где је Shadow Tree постојао само на C++ страни и био одвојен од JS стабла преко асинхроног Bridge-а, Fabric ствара потпуно синхронизовану хијерархијску репрезентацију UI. Чворови Shadow Tree-ја чувају props-е, стање и стилове компоненти, а Yoga израчунава распоред директно на C++ нивоу.

Када React компонента ажурира своје стање, React Native шаље нови Shadow Node у Fabric. Fabric не прецртава цео UI — користи алгоритам поређења (diffing) на C++ нивоу да одреди који чворови су се променили. Само измењени чворови се шаљу на изворни рендеринг, што значајно смањује обим посла.

ТрофаЗно рендеровање Fabric-а

Процес рендеровања у Fabric-у се састоји од три фазе које се извршавају синхроно на C++ нивоу без пребацивања нити. Прва фаза — Render: React позива функцију рендеровања компоненте, која враћа React Element Tree. Друга фаза — Commit: React Native ствара ново Shadow Tree и израчунава промене на основу старе верзије. Трећа фаза — Mount: Fabric примењује промене на изворни UI, стварајући, ажурирајући или бришући UIView.

• Render — извршава се на JS нити, ствара React Element Tree.
• Commit — C++ Shadow Tree израчунава diff и формира листу мутација.
• Mount — мутације се примењују на изворни UI на главној нити.

Све три фазе раде као јединствени конвејер, где се подаци преносе кроз JSI без серијализације. Ово је кључна разлика у односу на стару архитектуру, где су између фаза постојали прекиди: JS → (JSON) → Shadow Thread → (распоред) → Native Thread.

Fabric vs стари рендерер: поређење

Поређење Fabric-а са старим рендерером показује колико се значајно променила архитектура React Native. Стари рендерер је радио асинхроно, разбијајући процес рендеровања на три независне нити. Fabric обједињује све у један C++ конвејер.

У пракси, Fabric је посебно користан за апликације са честим ажурирањима UI: анимације, скроловања са плутајућим заглављима, подаци у реалном времену. За статичне странице (текст, дугмад) разлика је мање приметна. Према бенчмарковима Meta, Fabric смањује време рендеровања почетног учитавања листе за 40–60%.

JSI и Fabric: нова комуникација

JSI (JavaScript Interface) — је кључна компонента која чини Fabric могућим. Кроз JSI, Fabric добија директан приступ JavaScript вредностима без серијализације. Када React преноси props-е у Fabric, они се не копирају кроз JSON — JSI преноси показиваче на податке у меморији JS мотора.

Архитектура JSI-ја омогућава Fabric-у да ради са било којим JavaScript мотором — Hermes, JSC или V8. C++ код Fabric-а не зависи од конкретне имплементације JS мотора, што поједностављује одржавање и тестирање. Све операције са UI — креирање, ажурирање, брисање — извршавају се кроз JSI, што гарантује минимално кашњење.

// Fabric C++ конвејер рендеровања кроз JSI
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // Синхрони пренос props-а кроз JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Израчунавање распореда директно кроз Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Примена мутација на изворни UI
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Кључна предност — синхроно ажурирање. У старој архитектури, UI се ажурирао кроз асинхрони ред: React је слао команду преко Bridge-а, Shadow Thread је обрађивао распоред, Native Thread је рендеровао. У Fabric-у, сви кораци се извршавају секвенцијално у једном пролазу. Ово елиминише услове трке и гарантује да UI одговара тренутном стању апликације.

Миграција на Fabric

Миграција на Fabric не захтева преписивање React компоненти — све постојеће React Native компоненте настављају да раде. Међутим, библиотеке са изворним кодом (Native Module, прилагођени ViewManager) могу захтевати ажурирање. Meta препоручује проверу компатибилности сваке библиотеке пре укључивања нове архитектуре.

За укључивање Fabric-а у пројекту React Native 0.76+ поставите заставу newArchEnabled: true у react-native.config.js. Fabric ће се укључити аутоматски заједно са Turbo Module-ом. У случају проблема, Fabric се може искључити, враћањем на стари рендерер без промене кода апликације — обе архитектуре се подржавају паралелно.

// package.json — проверите библиотеке компатибилне са 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"

При миграцији је важно ажурирати све изворне библиотеке на верзије компатибилне са Fabric-ом. Велике библиотеке, попут react-native-reanimated и react-native-gesture-handler, већ подржавају нову архитектуру. За библиотеке које још нису ажуриране, Fabric пружа механизам компатибилности — ако библиотека не подржава Fabric, рендерер аутоматски прелази на стари за ту библиотеку.