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 та проєкту «The New Architecture». Основна мета — вирішити проблеми продуктивності, пов'язані з асинхронним триетапним рендерингом. У старій архітектурі кожна зміна стану вимагала трьох проходів через різні потоки, що створювало затримку між зміною даних і відрисовкою UI.

Fabric заснований на концепції незмінного тіньового дерева (Immutable Shadow Tree). Кожен вузол дерева являє собою React-компонент із його пропсами та станом. При зміні стану створюється нове дерево, а Fabric обчислює різницю між старим і новим деревом і застосовує лише необхідні зміни до нативного UI. Це мінімізує кількість операцій із UIView/ViewGroup і скорочує час рендерингу.

Як працює Shadow Tree

Shadow Tree — це основа роботи Fabric. На відміну від старої архітектури, де Shadow Tree існував лише на C++ стороні та був відділений від JS-дерева через асинхронний Bridge, Fabric створює повністю синхронізоване ієрархічне представлення UI. Вузли Shadow Tree зберігають пропси, стан і стилі компонентів, а 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: анімації, скроли з плаваючими заголовками, real-time дані. Для статичних сторінок (текст, кнопки) різниця менш помітна. За даними бенчмарків Meta, Fabric скорочує час рендерингу початкового завантаження списку на 40–60%.

JSI та Fabric: нова комунікація

JSI (JavaScript Interface) — це ключовий компонент, який робить Fabric можливим. Через JSI Fabric отримує прямий доступ до JavaScript-значень без серіалізації. Коли React передає пропси в 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();

    // Синхронна передача пропсів через 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 усі кроки виконуються послідовно в одному проході. Це усуває race conditions і гарантує, що 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, рендерер автоматично перемикається на старий для цієї бібліотеки.