Ответ 1

Я не знаю, является ли это ответом на ваш вопрос, но я нашел это в официальном документе React:

Реагирует строит и поддерживает внутреннее представление визуализированного пользовательского интерфейса. Он включает элементы React, которые вы возвращаете из своих компонентов. Это представление позволяет React избегать создания узлов DOM и доступа к существующим без необходимости, поскольку это может быть медленнее операций над объектами JavaScript. Иногда он называется "виртуальным DOM", но он работает аналогично с React Native.

Итак, я бы сказал, что да, он управляет очень похожим внутренним представлением тому, что используется в React.js. Тогда я предполагаю, что он использует Javascript API для рендеринга собственных представлений так же, как прочитанная статья.

ИЗМЕНИТЬ Этот комментарий, предоставленный Sebas в комментарии, также интересен тем, что член команды React (и React Native) говорит, что:

React Native показывает, что ReactJS всегда был больше о "zero DOM", чем "virtual DOM" (вопреки распространенному мнению).

Похоже, что так называемый "React virtual DOM" намного ближе к внутренней структуре/представлению элементов, которые могут быть сопоставлены с различными технологиями, чем с HTML DOM.

Ответ 2

Здесь приведено упрощение: ReactJS выводит DOM, который может отображаться в браузерах. Как вы уже знаете, виртуальная DOM помогает ReactJS эффективно отслеживать дельта того, что изменилось. Для React Native для iOS в конечном итоге выводится код UIKit. То же самое происходит с React Native для Android, но вместо вывода DOM или UI Kit выход создается с помощью Android SDK. Таким образом, виртуальный DOM является лишь промежуточным этапом. Его можно рассматривать как комбинацию внутренней структуры данных для хранения данных, которые описывают, где отображать кнопку и текстовое поле, что происходит, когда вы нажимаете кнопку и т.д., И эффективный алгоритм для отслеживания изменений. Тот же код может использоваться для всех платформ. Только последний шаг отличается. В зависимости от платформы у него есть код, который генерирует код DOM, UIKit или любое другое имя Android UI lib.

Ответ 3

В этой статье описывается новая архитектура React, называемая Fiber. Кажется, это правильный ответ о том, что происходит в React Native или, по крайней мере, о том, что React Native будет пытаться достичь в ближайшем будущем.

DOM - это только одна из сред рендеринга, которую может оказать Реакт, другие основные цели - это родные виды iOS и Android через React Родной. (Вот почему "виртуальный DOM" является немного неправильным.)

Причина, по которой он может поддерживать так много целей, состоит в том, что React разработан так что сверка и рендеринг являются отдельными фазами. примиритель выполняет работу по вычислению, какие части дерева имеют изменено; рендеринг затем использует эту информацию для фактического обновления рендеринговое приложение.

Это разделение означает, что React DOM и React Native могут использовать их собственные рендереры, совместно использующие один и тот же примиритель, предоставленный React Ядро.

Волокно повторяет примиритель.

Ответ 4

Короче

Ну... в сущности, да, точно так же, как Reactjs Virtual DOM, React-Native создает иерархию дерева для определения исходного макета и создает разницу этого дерева при каждом изменении макета для оптимизации рендеринга. Кроме того, React-Native управляет обновлениями пользовательского интерфейса через пару уровней архитектуры, которые в конечном итоге преобразуют способы представления представлений при попытке оптимизировать изменения до минимума, чтобы обеспечить максимально возможный рендеринг.

Более подробное объяснение

Чтобы понять, как реагировать native создает представления в фоновом режиме, вам нужно понять основы, и для этого я предпочел бы начать с нуля

1. Механизм компоновки йоги

Yoga - это механизм кросс-платформенной компоновки, написанный на C, который реализует Flexbox через привязки к собственным представлениям (Java Android Просмотров /Objective-C iOS UIKit).

Все раскладки макетов различных видов, тексты aodnd images в React-Native выполняются с помощью йоги, это в основном последний шаг, прежде чем наши представления будут отображаться на экране

2. Теневое дерево/Узлы тени

Когда response-native отправляет команды для рендеринга макета, группа теневых узлов собирается для сборки теневого дерева, которое представляет измененную собственную сторону макета (то есть: записывается на соответствующем родном языке, Java для Android и Objective-C для iOS), который затем переводится в фактические представления на экране (с использованием йоги).

3. ViewManager

ViewManger - это интерфейс, который знает, как перевести виды просмотра, отправленные из JavaScript, в их собственные компоненты пользовательского интерфейса. ViewManager знает, как создать тень node, собственный вид node и обновить представления. В структуре React-Native существует много ViewManager, которые позволяют использовать собственные компоненты. Если, например, вы когда-нибудь хотели бы создать новое настраиваемое представление и добавить его в native-native, это представление должно будет реализовать интерфейс ViewManager

4. UIManager

UIManager - это последний фрагмент головоломки, или же первый. Декларативные команды JavaScript JSX отправляются в native как императивные команды, которые сообщают React-Native, как развернуть представления, шаг за шагом итеративно. Таким образом, как первый рендер, UIManager отправит команду для создания необходимых представлений и продолжит отправлять обновления, поскольку пользовательский интерфейс приложения изменяется со временем.

So React-Native по-прежнему использует способность Reactjs вычислять разницу между предыдущим и текущим представлением рендеринга и соответственно отправляет события в UIManger

Чтобы узнать о процессе немного более подробно, я рекомендую следующую презентацию Эмиль Шёландер из конференции "Реагент-родная ЕС 2017" во Вроцлаве