После 6 лет разработки команда React Native представила полностью переписанную архитектуру фреймворка (0.76) – самое значительное обновление с момента создания React Native. Это результат масштабной работы над улучшением производительности, стабильности и возможностей платформы.

Ключевые изменения

Новая версия обеспечивает полную поддержку современных возможностей React, включая Suspense, Transitions и автоматический батчинг. В React Native наконец появился полноценный useLayoutEffect – теперь работа с лейаутом стала синхронной и предсказуемой. Это позволяет корректно позиционировать элементы интерфейса без промежуточных состояний и визуальных артефактов.

Улучшение производительности

Мост между JavaScript и нативным кодом полностью удален. Коммуникация теперь происходит напрямую через JavaScript Interface (JSI), что существенно ускоряет работу приложения и его запуск. Новый рендерер может обрабатывать несколько деревьев компонентов одновременно в разных потоках с разными приоритетами. Это позволяет прерывать низкоприоритетные обновления для обработки пользовательского ввода, обеспечивая отзывчивость интерфейса даже при сложных вычислениях.

Технические улучшения

Система нативных модулей была полностью переработана. Теперь доступен синхронный доступ к нативным интерфейсам с полной типобезопасностью между JavaScript и нативным кодом. Появилась возможность писать кроссплатформенный код на C++, который работает на всех поддерживаемых платформах: iOS, Android, Windows и macOS. Модули загружаются лениво, что значительно сокращает время запуска приложения и потребление памяти.

View Flattening, ранее доступный только на Android, теперь работает и на iOS благодаря общему C++ рендереру. Эта оптимизация автоматически упрощает глубокие деревья компонентов, улучшая производительность рендеринга.

Проверено в продакшене

Новая архитектура уже активно используется в крупных приложениях: Facebook, Instagram, Expensify, Kraken и BlueSky. Facebook и Instagram для Meta Quest также построены на новой архитектуре. Это демонстрирует её готовность к применению в проектах любого масштаба и сложности.

Процесс миграции

Большинство приложений смогут обновиться с тем же уровнем усилий, как и при обычном релизе. Более 850 популярных библиотек уже поддерживают новую архитектуру, включая все библиотеки с более чем 200 тысячами еженедельных загрузок. Благодаря автоматическому слою совместимости со старой архитектурой, миграция может быть постепенной – нет необходимости переписывать всё приложение одновременно.

Популярные библиотеки, такие как react-native-mmkv и Reanimated, уже получили значительные улучшения от перехода на новую архитектуру. MMKV стал полностью кроссплатформенным C++ модулем с улучшенной типобезопасностью, а Reanimated 4 получил возможность управлять анимациями и лейаутом в разных потоках.

Дальнейшее развитие

В планах команды React Native – улучшение встроенных компонентов и расширение поддержки современных веб-стандартов. Event Loop теперь работает в соответствии с веб-спецификациями HTML Standard, что в будущем позволит использовать такие API как microtasks, MutationObserver и IntersectionObserver.

Практическая информация

Совместимость используемых библиотек можно проверить на reactnative.directory. Официальная документация содержит подробное руководство по миграции. При возникновении проблем всегда есть возможность отключить новую архитектуру через конфигурацию проекта.

Статья написана по мотивам поста из tg-канала Cross Join