Кроссплатформенная реализация¶
Рендерер React Native использует основную реализацию рендеринга для совместного использования на разных платформах.
В предыдущей системе рендеринга React Native React Shadow Tree, логика компоновки и View Flattening алгоритм были реализованы по одному разу для каждой платформы. Текущий рендерер был разработан как кросс-платформенное решение благодаря общей реализации ядра на C++.
Команда React Native намерена включить в систему рендеринга систему анимации, а также расширить систему рендеринга React Native на новые платформы, такие как Windows, операционные системы игровых консолей, телевизоров и многое другое.
Использование C++ для основной системы рендеринга дает несколько преимуществ. Единая реализация снижает стоимость разработки и сопровождения. Это повышает производительность создания React Shadow Trees и расчета компоновки, поскольку накладные расходы на интеграцию Yoga с рендерером сведены к минимуму на Android (т.е. больше нет JNI для Yoga). Наконец, объем памяти каждого узла React Shadow Node меньше в C++, чем если бы он был выделен из Kotlin или Swift.
Команда также использует возможности C++, обеспечивающие неизменяемость, чтобы гарантировать отсутствие проблем, связанных с одновременным доступом к общим, но не защищенным ресурсам.
Важно признать, что вариант использования рендерера для Android все еще несет затраты на JNI для двух основных случаев использования:
- Расчет макета сложных представлений (например,
Text,TextInputи т.д.) требует отправки пропсов через JNI. - Фаза монтирования требует отправки операций мутации через JNI.
Команда изучает возможность замены ReadableMap на новый механизм сериализации данных с использованием ByteBuffer для снижения накладных расходов JNI. Наша цель — снизить накладные расходы JNI на 35-50%.
Рендерер предоставляет две стороны своего C++ API:
- (i) для связи с React
- (ii) для связи с хост-платформой
Для (i), React взаимодействует с рендерером для рендеринга дерева React и "прослушивания" событий (например, onLayout, onKeyPress, touch и т.д.).
В случае (ii) рендерер React Native взаимодействует с платформой хоста для монтажа представлений хоста на экране (создание, вставка, обновление или удаление представлений хоста) и прослушивает события, которые генерируются пользователем на платформе хоста.
