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++ rendering pipeline via JSI
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // Synchronous prop transfer via JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Layout calculation through Yoga directly
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Apply mutations to native 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 — check Fabric-compatible libraries
"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, рендерер автоматически переключается на старый для этой библиотеки.