Есть ли у React Native "Виртуальный DOM"?
На вики- странице ReactJS о Virtual DOM:
React создает кэш структуры данных в памяти, вычисляет результирующие различия и затем эффективно обновляет отображаемую DOM браузера. Это позволяет программисту писать код так, как будто вся страница отображается при каждом изменении, в то время как библиотеки React отображают только те подкомпоненты, которые действительно изменяются.
Другими словами, Virtual DOM позволяет нам повысить производительность, избегая прямых манипуляций с DOM.
Но как насчет React Native?
Мы знаем, что теоретически на других платформах существуют собственные представления и компоненты пользовательского интерфейса. В самом DOM ничего нет. Так можем ли мы сказать, что в React Native есть "Virtual DOM" или мы говорим о чем-то еще?
Например, в спецификациях Weex есть раздел, в котором описаны методы работы с DOM-деревом напрямую. И я предполагаю, что потенциально мы можем думать, что React Native также должен иметь некое DOM-дерево, а также уровень абстракции "Virtual DOM", который является основной идеей самого React.
Итак, мой вопрос:
Имеет ли React Native своего рода "Виртуальный DOM" (или его представление), и если да, то как этот "Виртуальный DOM" переносится на различные платформы?
ОБНОВИТЬ:
Цель этого вопроса - пролить свет на то, как React Native управляет рендерингом собственных компонентов пользовательского интерфейса. Есть ли какой-то конкретный подход, и если да, то как он официально называется?
ОБНОВЛЕНИЕ 2:
В этой статье описывается новая архитектура React под названием Fiber, которая выглядит как ответ на этот вопрос.
4 ответа
Короче
Ну, по сути, да, точно так же, как и в виртуальном DOM от Reactjs, React-Native создает древовидную иерархию для определения исходного макета и создает разность этого дерева при каждом изменении макета для оптимизации визуализации. За исключением того, что React-Native управляет обновлениями пользовательского интерфейса через пару уровней архитектуры, которые в конечном итоге транслируют способ визуализации представлений, одновременно пытаясь оптимизировать изменения до минимума, чтобы обеспечить максимально быструю визуализацию.
Более подробное объяснение
Чтобы понять, как реагирует native создает представления в фоновом режиме, вам нужно понять основы, и для этого я бы предпочел начать с нуля
1.Двигатель макета йоги
Yoga - это кроссплатформенный механизм компоновки, написанный на C, который реализует Flexbox посредством привязок к нативным представлениям (Java Android Views / Objective-C iOS UIKit).
Все расчеты компоновки различных видов, текстов и изображений в React-Native выполняются с помощью йоги, это в основном последний шаг перед отображением наших видов на экране.
2. Теневое дерево / Теневые узлы
Когда Reaction-native отправляет команды для визуализации макета, группа теневых узлов собирается для создания теневого дерева, которое представляет изменяемую собственную часть макета (т.е. написано на соответствующем родном языке, Java для Android и Objective-C). для iOS), который затем переводится в фактические виды на экране (с помощью йоги).
3. ViewManager
ViewManger - это интерфейс, который знает, как преобразовать типы представлений, отправленные из JavaScript, в их собственные компоненты пользовательского интерфейса. ViewManager знает, как создать теневой узел, собственный узел представления и обновить представления. В среде React-Native существует множество ViewManager, которые позволяют использовать собственные компоненты. Например, если вы когда-нибудь захотите создать новое настраиваемое представление и добавить его к реагирующему, то это представление должно будет реализовать интерфейс ViewManager.
4. UIManager
UIManager - последний кусочек головоломки или фактически первый. Декларативные команды JavaScript JSX отправляются на нативный язык в качестве императивных команд, которые сообщают React-Native, как размещать представления, итеративно, шаг за шагом. Таким образом, в качестве первого рендера UIManager отправит команду для создания необходимых представлений и продолжит отправлять обновления обновлений по мере изменения пользовательского интерфейса приложения.
Таким образом, React-Native по-прежнему использует способность Reactjs для вычисления разницы между предыдущим и текущим представлениями рендеринга и соответственно отправляет события в UIManager.
Чтобы узнать об этом процессе более подробно, я рекомендую следующую презентацию Эмиля Шеландера с конференции React-Native EU 2017 во Вроцлаве
Я не знаю, является ли это ответом на ваш вопрос, но я нашел это в официальных документах React:
React создает и поддерживает внутреннее представление визуализированного пользовательского интерфейса. Он включает элементы React, которые вы возвращаете из своих компонентов. Это представление позволяет React избегать создания DOM-узлов и обращаться к существующим без необходимости, поскольку это может быть медленнее, чем операции с объектами JavaScript. Иногда его называют "виртуальным DOM", но на React Native он работает точно так же.
Поэтому я бы сказал, что да, он управляет внутренним представлением, очень похожим на то, которое используется в React.js. Затем я предполагаю, что для отображения нативных представлений используются API-интерфейсы Javascript, как и в прочитанной статье.
РЕДАКТИРОВАТЬ Это сообщение, представленное Sebas в комментарии, также интересно, потому что член команды React (и React Native) говорит, что:
React Native показывает, что ReactJS всегда был больше о "нулевом DOM", чем "виртуальном DOM" (вопреки распространенному мнению).
Похоже, что так называемый "React virtual DOM" гораздо ближе к внутренней структуре / представлению элементов, которые могут быть сопоставлены с различными технологиями, чем к HTML DOM.
В этой статье описывается новая архитектура React под названием Fiber. Кажется, это правильный ответ о том, что происходит в React Native или, по крайней мере, о том, что React Native будет пытаться достичь в ближайшем будущем.
DOM - это всего лишь одна из сред визуализации, которые React может отображать, другими основными целями являются собственные представления iOS и Android через React Native. (Вот почему "виртуальный DOM" немного ошибочен.)
Причина, по которой он может поддерживать так много целей, заключается в том, что React спроектирован так, что согласование и рендеринг являются отдельными фазами. Примиритель выполняет работу по вычислению того, какие части дерева изменились; затем средство визуализации использует эту информацию для фактического обновления визуализированного приложения.
Это разделение означает, что React DOM и React Native могут использовать свои собственные средства визуализации, совместно используя один и тот же согласователь, предоставляемый ядром React.
Волокно переопределяет примиритель.
Вот упрощение: ReactJS выводит DOM, который может быть визуализирован браузерами. Как вы уже знаете, виртуальный DOM помогает ReactJS эффективно отслеживать изменения того, что изменилось. В конечном счете, для React Native для iOS выводится код UIKit. То же самое с React Native для Android, но вместо вывода DOM или UI Kit, вывод создается с помощью Android SDK. Так что виртуальный DOM - это всего лишь промежуточный шаг. Это можно рассматривать как комбинацию внутренней структуры данных для хранения данных, которые описывают, где отображать кнопку и текстовое поле, что происходит при нажатии кнопки и т. Д., И эффективный алгоритм для отслеживания того, что изменилось. Один и тот же код можно использовать для всех платформ. Только последний шаг отличается. В зависимости от платформы, он имеет код, который генерирует DOM, код UIKit или любое другое имя Android UI lib, которое называется.