Что будет дальше в React Native? (2022 и далее)


Версии:

Версия 0.68 — это релизная версия для перехода на новую архитектуру. Это делает новую архитектуру открытой для ранних последователей.

Версия 0.69 [LATEST]- это первый релиз с поддержкой React 18. Она включена по умолчанию. Вы можете отказаться от поддержки реакт 18, изменив одну строку.

Чтобы узнать больше о реакте 18, ознакомьтесь с моей предыдущей статьей в блоге
https://dev.to/monicaacha2103/all-you-need-to-know-about-react-18-dbc.

Версия 0.70 [NEXT] : эта версия будет поставляться с Hermes в качестве движка по умолчанию.
Мы можем ожидать появления новой архитектуры в следующих версиях.

Наследие архитектуры [< v0.70].

  1. Нативный код: Большая часть нативного кода iOS написана на Swift/Objective C . Аналогично, нативный код Android написан на Java/Kotlin.
  2. Javascript VM: Виртуальная машина, на которой выполняется весь код javascript.

iOS — React Native использует JavaScriptCore, предоставляемый платформой iOS.

Android — React Native собирает JavaScriptCore вместе с приложением. Это увеличивает размер приложения. Таким образом, приложение Hello World от RN займет от 3 до 4 мегабайт для Android.

Web (Chrome) — В режиме отладки в Chrome код JavaScript выполняется в самом Chrome (вместо JavaScriptCore на устройстве) и взаимодействует с нативным кодом через WebSocket. Здесь будет использоваться движок V8.

Три основные основы — модель потоков, мост и нативный модуль пользовательского интерфейса

  1. React Native Bridge — React Native bridge — это мост C++/Java, который отвечает за коммуникацию между нативным и Javascript потоком. Для передачи сообщений используется собственный протокол. Он сериализует все данные, которые должны быть переданы от слоя JS к нативному слою. Затем нативный слой десериализует данные и выполняет необходимые операции — какие представления загрузить, какую информацию получить от оборудования и т.д.

  2. Модули пользовательского интерфейса — нативный модуль, который отображает представления JSX на нативные представления.

  3. Модель потоков.
    Когда запускается приложение React Native, оно порождает следующие очереди потоков.

  • Главный поток (нативные модули) — это главный поток, который запускается сразу после запуска приложения. Он загружает приложение и запускает поток JS для выполнения кода Javascript. Нативный поток также прослушивает события пользовательского интерфейса, такие как «нажатие», «прикосновение» и т.д. Эти события затем передаются в поток JS через RN Bridge. После загрузки Javascript поток JS отправляет информацию о том, что должно быть отображено на экране.

  • Теневой поток — Эта информация используется теневым потоком узла для расчета макетов. Теневой поток подобен математическому механизму, который окончательно решает, как вычислить позиции представления. Затем эти инструкции передаются обратно в основной поток для рендеринга вида.

  • Поток Javascript — Очередь Javascript — это очередь потоков, в которой выполняется основной поток JS. В потоке JS выполняется вся бизнес-логика, т.е. код в React Native.

  • Пользовательские нативные модули — Помимо потоков, порождаемых React Native, мы также можем порождать потоки в пользовательских нативных модулях, которые мы создаем для ускорения работы приложения. Например, анимация в React Native обрабатывается отдельным нативным потоком, чтобы разгрузить работу от потока JS.

Ограничения старой архитектуры —
Асинхронность, однопоточность, затраты на сериализацию данных при использовании Bridge.

Новая архитектура [начиная с версии 0.70]-

Hermes Engine —

Одним из важнейших моментов развертывания новой архитектуры является принятие нового JavaScript движка — Hermes. React Native 0.70 будет поставляться с Hermes в качестве движка по умолчанию. От него можно отказаться, если есть необходимость использовать более старые VM, такие как JavascriptCore.

Интерфейс JavaScript —

Связь между JavaScript и виртуальной машиной стандартизируется с помощью интерфейса JavaScript (JSI). JSI позволяет нативным компонентам и JS взаимодействовать друг с другом. Он заменяет React Native Bridge.

Турбо-модули —
Турбомодули — это следующая итерация нативных модулей. Они ускоряют инициализацию и вызов нативных модулей из JavaScript. Он решает проблемы асинхронности и загрузки, поскольку они ведут себя синхронно в JavaScript и лениво загружаются в память, позволяя приложению запускаться быстрее.

Codegen —
Codegen решает проблему безопасности типов, поскольку позволяет нам генерировать интерфейсы, которые мы можем использовать, чтобы убедиться, что наш нативный код остается синхронизированным с данными, которые мы передаем из слоя JavaScript.

Fabric —
Новая архитектура использует новую систему рендеринга, Fabric Renderer, которая улучшает уровень рендеринга, т.е. отзывчивость пользовательского интерфейса.

Компоненты Fabric — это предпочтительный способ создания многократно используемых компонентов пользовательского интерфейса, обеспечивающий пользователям нативный опыт. Это поможет снизить перегрузку архитектуры приложений, и ваши приложения будут работать быстрее, чем старые кроссплатформенные.

Fabric использует JSI для раскрытия методов для кода JavaScript. Это поможет снизить перегрузку архитектуры приложений, и ваши приложения будут работать быстрее, чем старые кроссплатформенные.

Fabric использует один поток, поможет пользовательскому интерфейсу взаимодействовать через обратные вызовы через JavaScript.

Мы часто видели, как кроссплатформенные приложения борются с разрывом между общим кодом и родным окружением. Чтобы улучшить поток данных и отладить подобные ошибки, нужны собственные мосты. Fabric обеспечит упрощенный нативный мост между JS и фреймворками.

Улучшения в новой архитектуре —

  • Эффективное взаимодействие между платформами JS и ОС
  • Улучшенный пользовательский опыт благодаря высокореактивным пользовательским интерфейсам
  • Улучшенное совместное использование кода с возможностью отладки
  • Быстрая загрузка мобильных приложений
  • Синхронное выполнение
  • Более быстрая сборка
  • Concurrency
  • Меньше накладных расходов на сериализацию данных
  • Безопасность типов

Оцените статью
devanswers.ru
Добавить комментарий