В этой статье в основном представлена новая архитектура ReactNative (далее именуемая RN), которую команда FB рефакторит, основная текущая архитектура, проблемы, связанные с Bridge, новая архитектура, концепции JSI, Fabric, TurboModules, CodenGen и LeanCore.
текущая архитектура
RN теперь имеет в основном 3 потока
- JS-нить. Поток выполнения кода JS отвечает за обработку на логическом уровне. Metro (инструмент для создания пакетов) упаковывает исходный код React в один файл JS (то есть JSBundle на картинке). Затем передайте его JS-движку для выполнения.Теперь ios и android используют JSC вместе.
- Поток пользовательского интерфейса (основной поток/собственный поток). Этот поток в основном отвечает за собственный рендеринг (собственный пользовательский интерфейс) и вызов собственных возможностей (собственных модулей), таких как Bluetooth.
- Теневая нить. Этот поток предназначен в основном для создания Shadow Tree для имитации дерева структуры React. Shadow Tree может быть похож на виртуальный дом. RN использует макет Flexbox, но он не поддерживается изначально, поэтому Yoga — это метод макета, используемый для преобразования макета Flexbox в родную платформу.
проблема моста
Во-первых, давайте рассмотрим текущий процесс текущего моста.
Когда мы пишем исходный код React, как показано ниже.
<View style={{
backgroundColor: 'pink',
width: 200,
height: 200}}/>
Поток JS сначала сериализует его, чтобы сформировать следующее сообщение
UIManager.createView([343,"RCTView",31,{"backgroundColor":-16181,"width":200,"height":200}])
Отправить в ShadowThread через мост. Получив эту информацию, Shadow Tread сначала десериализует ее для формирования дерева теней, а затем передает ее в Yoga для формирования собственной информации о макете.
Затем он передается в поток пользовательского интерфейса через мост.
После того, как поток пользовательского интерфейса получает сообщение, он также сначала десериализует его, а затем рисует в соответствии с заданной информацией о макете.
Из приведенного выше процесса видно, что взаимодействие трех потоков происходит через мост, поэтому узкое место здесь.
Соедините три функции:
- асинхронный. Эти очереди сообщений являются асинхронными и не гарантируют обработку событий.
- Сериализация. Чтобы передать сообщение в формате JSON, оно должно каждый раз проходить сериализацию и десериализацию, что очень дорого.
- пакетная обработка. Ставьте вызовы Native в очередь и обрабатывайте их пакетами.
Преимущество асинхронного дизайна в том, что он не блокирует.Этот дизайн в большинстве случаев удовлетворяет требованиям производительности, но в некоторых случаях это будет проблематично, например, при водопадной прокрутке.
Когда водопад сползает вниз, ему нужно отправить запрос на сервер, чтобы получить данные для следующего рендеринга.
Событие прокрутки происходит в потоке пользовательского интерфейса, а затем отправляется в поток JS через мост. Поток JS отправляет запрос после прослушивания сообщения, сервер возвращает данные, а затем возвращает их в Native для рендеринга через Bridge. Поскольку все они асинхронны, будут появляться пустые модули, вызывающие проблемы с производительностью.
Как видно из вышеизложенного, узкое место в производительности в основном возникает при взаимодействии JS-потока с Native, если взаимодействия нет, то производительность RN хорошая.
Поэтому для оптимизации RN в основном ориентирован на Bridge, и есть следующие три принципа:
- JS и нативная сторона не взаимодействуют. Самый тщательный способ, новости не идут Мост.
- JS и Native сокращают общение. В случае, если обе стороны не могут этого избежать, постарайтесь максимально сократить количество сообщений. Например, несколько запросов объединяются в один.
- Меньший размер JSON. Например, преобразование изображения в формат Base64 приведет к тому, что передаваемые данные станут больше и заменят их сетевым образом.
РН может пройтиMessageQueueЧтобы контролировать связь моста, основной код выглядит следующим образом
import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue.js';
const spyFunction = (msg) => {
console.log(msg);
};
MessageQueue.spy(spyFunction);
Ниже приведена отслеживаемая информация
новая архитектура
Команда FB постепенно узнала об этих проблемах, и Flutter также оказал на нее давление, чтобы предложить новую архитектуру в 2018 году.
Он в основном состоит из JSI, Fabric, TurboModules, CodeGen и LeanCode.
JSI
JSI является ядром и краеугольным камнем всей архитектуры, и на нем все построено.
JSI — это аббревиатура от Javascript Interface, облегченная структура, написанная на C++, ее роль заключается вЧерез JSI объект JS может напрямую получить ссылку на объект C++ (Host Objects) и вызвать соответствующий метод..
Кроме того, JSI не имеет ничего общего с React и может использоваться в любом JS-движке (V8, Hermes).
С JSI JS и Native могут общаться напрямую.Процесс вызова выглядит следующим образом:
JS->JSI->C++->ObjectC/Java
С тех пор связь между тремя потоками больше не должна проходить через мост, и о существовании друг друга можно узнать напрямую, что делает синхронную связь реальностью. Для конкретного использования см.официальный пример.
Еще одним преимуществом является то, что с JSI движок JS больше не ограничивается АО и может быть свободно заменен на V8, Hermes, что еще больше повышает скорость разбора и выполнения JS.
Fabric
Fabric — это новый уровень пользовательского интерфейса во всей архитектуре, включая средство визуализации и теневой поток на новой архитектурной диаграмме.
На рисунке ниже представлена старая модель связи.
Три потока взаимодействуют асинхронно через мост, и данные необходимо копировать в нескольких копиях.
С JSI JS может напрямую вызывать другие потоки для реализации механизма синхронной связи. Кроме того, на данные можно ссылаться напрямую без копирования, поэтому они становятся следующим новым режимом связи.
В дополнение к возможностям синхронизации, прямая ссылка, еще одним преимуществом является то, что Fabric теперь поддерживает приоритеты рендеринга, такие как режимы React Concurrent и Suspense.
На следующих двух рисунках показаны изменения до и после добавления Fabric от запуска до этапа рендеринга.
После превращения в ткань
TurboModules
TurboModules в основном связаны с собственными возможностями приложений и соответствуют собственным модулям на новой архитектурной диаграмме Оптимизация этой части:
- Через JSI JS может напрямую вызывать модуль Native для выполнения некоторых синхронных операций. Такие, как вызов возможности камеры.
- Нативные модули загружаются лениво. Раньше при запуске RN framework загружались все собственные модули, что приводило к медленному запуску и длительному времени. Теперь с помощью TurboModules можно выполнять загрузку по требованию, сокращая время запуска и повышая производительность.
CodeGen
С помощью CodeGen статически типизированный код JS, такой как Flow или Ts, автоматически переводится в собственный код, используемый Fabric и TurboModules.
Lean Core
Эта часть в основном посвящена уменьшению размера пакета, так как все предыдущие пакеты были размещены в основном проекте RN. Теперь ядро РН хранит только нужные пакеты, остальные перемещаются вreact-native-communityИли разбейте отдельные компоненты, такие как Webview и AsyncStore.
текущий прогресс
- JSI следует за выпуском RN0.59 (JSIExecuter.cpp), но затем либо использует мост для связи
- Fabric и TurboModules все еще находятся в разработке, LeanCore готов.
- Теперь доступны кроссплатформенные модули C++.
- Он будет обратно совместим с JS, но не совместим с собственными модулями.
- Конкретный прогресс см.Обсуждение прогресса тканиа такжеОбсуждение прогресса TurboModulesа такжеОбсуждение прогресса JSIа такжеОбсуждение прогресса CodeGen,так же какРеагировать на официальный исходный код
В настоящее время новая архитектура RN находится в стадии интенсивного рефакторинга, который немного отстает от запланированного графика, и мы с нетерпением ждем выхода и производительности нового фреймворка.
Набор инженера-разработчика интерфейса NetEase Cloud Music
описание работы
1. Отвечает или участвует в начальной разработке различных типов проектов (Web&Webview, RN, Hybrid Web, PC&MAC, небольшие программы, творческая деятельность, промежуточные и серверные системы и т. д.), а также полный дизайн системы, технология выбор и разработка модуля.2. С целью постоянного улучшения качества, эффективности и опыта, упаковывайте компоненты, депозитарные документы, производственные инструменты, стройте системы и наслаждайтесь повседневной жизнью инженеров.
3. Делитесь тем, что вы видите и думаете каждый день, помогайте коллегам расти вместе и создавайте позитивную и здоровую техническую атмосферу.
Профессиональные требования
1. Владеет различными технологиями и стандартами веб-интерфейса (Javascript, HTML, CSS), знаком с распространенными решениями для макета страницы и имеет глубокое понимание разделения представления и данных, веб-семантики и т. д.2. Умение работать с инфраструктурой представления, управляемой данными (React, Angular, Vue...).
3. Знакомы с распространенными инструментами разработки интерфейса (webpack и т. д.) и имеете зрелое модульное мышление при разработке.
4. Знакомы с распространенными интерфейсными решениями для управления данными (такими как Redux, Mobx, Rxjs и т. д.), а также знаете их преимущества и недостатки, а также сценарии применения.
5. Знакомство с протоколом HTTP, владение инструментами сетевой отладки и базовые знания в области разработки серверов.
6. Низкая терпимость к повторяющейся или нерегулярной работе, которая может быть решена спонтанно с помощью связи или технических средств.
Дополнительные бонусные баллы:
1. Иметь принципиальное представление о более широком интерфейсе, выходящем за рамки рекомендаций по документации.
2. Solid Node Foundation, имеют собственный практический опыт асинхронного программирования Node, управления стабильностью и т. д., а также имеют опыт работы в крупномасштабной и высокодоступной производственной среде Node.
3. Богатый опыт кросс-энд (ПК и IOS и Android) разработки, с практическим опытом интеграции кросс-энд технологий.
4. Практический опыт в веб-творческой деятельности и играх, а также вывод соответствующих фреймворков или решений.
5. Лучше иметь опыт работы зрелой и крупной фронтенд-команды на крупном заводе, участвовать в разработке или умело применять внутреннюю инфраструктуру осаждения и уметь понимать их точки улучшения.
6. Руководил или участвовал в высококачественных проектах с открытым исходным кодом в качестве основного участника и обладал глубоким пониманием работы технических сообществ.
Контакты