De la página wiki de ReactJS sobre Virtual DOM:
React crea un caché de estructura de datos en la memoria, calcula las diferencias resultantes y luego actualiza el DOM que se muestra en el navegador de manera eficiente. Esto permite al programador escribir código como si toda la página se representara en cada cambio, mientras que las bibliotecas de React solo representan los subcomponentes que realmente cambian.
En otras palabras, Virtual DOM nos permite mejorar el rendimiento al evitar manipulaciones directas con DOM.
Pero, ¿qué pasa con React Native ?
Sabemos que, en teoría, en otras plataformas hay vistas nativas y componentes de interfaz de usuario. No hay nada sobre DOM en sí. Entonces, ¿podemos decir que React Native tiene "Virtual DOM" allí o estamos hablando de otra cosa?
Por ejemplo, hay una sección en las especificaciones de Weex que describe métodos para trabajar directamente con DOM-tree. Y mi suposición es que potencialmente podemos pensar que React Native también debería tener algún tipo de árbol DOM, así como una capa de abstracción "DOM virtual", que es la idea principal de React en sí.
Entonces mi pregunta es:
¿React Native tiene algún tipo de "DOM virtual" (o su representación) y, de ser así, cómo se transfiere este "DOM virtual" a varias plataformas?
ACTUALIZAR:
El objetivo de esta pregunta es arrojar algo de luz sobre cómo React Native gestiona la representación de los componentes nativos de la interfaz de usuario. ¿Hay algún enfoque específico y, de ser así, cómo se llama oficialmente?
ACTUALIZACIÓN 2:
Este artículo describe la nueva arquitectura de React llamada Fiber , que parece ser la respuesta a esta pregunta.
Bueno... en esencia, sí, al igual que el DOM virtual de Reactjs, React-Native crea una jerarquía de árbol para definir el diseño inicial y crea una diferencia de ese árbol en cada cambio de diseño para optimizar las representaciones. Excepto que React-Native administra las actualizaciones de la interfaz de usuario a través de un par de capas de arquitectura que al final traducen cómo se deben representar las vistas al intentar optimizar los cambios al mínimo para ofrecer la representación más rápida posible.
Para comprender cómo reaccionar nativo crea vistas en segundo plano, deberá comprender los fundamentos y, para eso, prefiero comenzar desde cero.
Yoga es un motor de diseño multiplataforma escrito en C que implementa Flexbox a través de enlaces a las vistas nativas (Java Android Views / Objective-C iOS UIKit) .
Todos los cálculos de diseño de las diversas vistas, textos e imágenes en React-Native se realizan a través de yoga, este es básicamente el último paso antes de que nuestras vistas se muestren en la pantalla.
Cuando react-native envía los comandos para representar el diseño, se ensambla un grupo de nodos de sombra para construir el árbol de sombra que representa el lado nativo mutable del diseño (es decir, escrito en el idioma nativo respectivo correspondiente, Java para Android y Objective-C para iOS) que luego se traduce a las vistas reales en pantalla (usando Yoga).
ViewManger es una interfaz que sabe cómo traducir los tipos de vista enviados desde JavaScript a sus componentes de interfaz de usuario nativos. ViewManager sabe cómo crear un nodo de sombra, un nodo de vista nativo y actualizar las vistas. En el marco React-Native, hay muchos ViewManager que permiten el uso de los componentes nativos. Si, por ejemplo, algún día desea crear una nueva vista personalizada y agregarla a react-native, esa vista deberá implementar la interfaz ViewManager.
El UIManager es la pieza final del rompecabezas, o en realidad la primera. Los comandos declarativos JSX de JavaScript se envían al nativo como comandos imperativos que le indican a React-Native cómo diseñar las vistas, paso a paso de forma iterativa. Entonces, como primer renderizado, UIManager enviará el comando para crear las vistas necesarias y continuará enviando las diferencias de actualización a medida que la interfaz de usuario de la aplicación cambie con el tiempo.
Entonces, React-Native básicamente todavía usa la capacidad de Reactjs para calcular la diferencia entre la representación de representación anterior y la actual y envía los eventos al UIManager en consecuencia.
Para conocer un poco más en profundidad el proceso, recomiendo la siguiente presentación de Emil Sjölander de la Conferencia React-Native EU 2017 en Wroclaw
No sé si esta es la respuesta a su pregunta, pero encontré esto en los documentos oficiales de React:
React crea y mantiene una representación interna de la interfaz de usuario renderizada. Incluye los elementos React que devuelves de tus componentes. Esta representación permite que React evite crear nodos DOM y acceder a los existentes más allá de la necesidad, ya que puede ser más lento que las operaciones en objetos JavaScript. A veces se lo denomina "DOM virtual", pero funciona de la misma manera en React Native.
Entonces diría que sí, maneja una representación interna muy similar a la que se usa en React.js. Entonces supongo que usa las API de Javascript para representar vistas nativas como sugiere el artículo que leíste .
EDITAR Esta publicación proporcionada por Sebas en un comentario también es interesante porque un miembro del equipo de React (y React Native) dice que:
React Native muestra que ReactJS siempre se ha centrado más en el "DOM cero" que en el "DOM virtual" (al contrario de la creencia popular).
Parece que el llamado 'DOM virtual de React' está mucho más cerca de una estructura/representación interna de los elementos que se pueden asignar a varias tecnologías que a un DOM HTML.
Este artículo describe la nueva arquitectura React llamada Fiber . Parece ser la respuesta correcta sobre lo que está sucediendo en React Native o al menos lo que React Native intentará lograr en el futuro más cercano.
El DOM es solo uno de los entornos de renderizado en los que React puede renderizar, los otros objetivos principales son las vistas nativas de iOS y Android a través de React Native. (Esta es la razón por la cual "DOM virtual" es un nombre poco apropiado).
La razón por la que puede admitir tantos objetivos es que React está diseñado para que la reconciliación y el renderizado sean fases separadas. El reconciliador hace el trabajo de calcular qué partes de un árbol han cambiado; el renderizador luego usa esa información para actualizar realmente la aplicación renderizada.
Esta separación significa que React DOM y React Native pueden usar sus propios renderizadores mientras comparten el mismo reconciliador, proporcionado por React core.
La fibra vuelve a implementar el reconciliador.