¿Cómo funciona React Native?

En la publicación de blog anterior , creamos una aplicación de inicio que muestra «¡GeeksForGeeks es increíble!» text y aprendí algo de código JavaScript usando la plataforma React Native.

Pero, ¿qué sucede en el código de bajo nivel, en el proyecto nativo?
Entonces, antes de profundizar en los ejemplos nativos de React, primero sepamos qué sucede exactamente en el código de bajo nivel.

Subprocesos en la aplicación React Native

Hay 4 subprocesos en la aplicación React Native:

1) Subproceso de interfaz de usuario: también conocido como subproceso principal. Esto se usa para la representación nativa de la interfaz de usuario de Android o iOS. Por ejemplo, en Android, este hilo se usa para medir/diseñar/dibujar Android.

2) JS Thread: JS thread o Javascript thread es el hilo donde se ejecutará la lógica. Por ejemplo, este es el hilo donde se ejecuta el código javascript de la aplicación, se realizan las llamadas a la API, se procesan los eventos táctiles y muchos otros. Las actualizaciones de las vistas nativas se procesan por lotes y se envían al lado nativo al final de cada ciclo de eventos en el subproceso de JS (y finalmente se ejecutan en el subproceso de la interfaz de usuario).

Para mantener un buen rendimiento, el subproceso JS debería poder enviar actualizaciones por lotes al subproceso de la interfaz de usuario antes de la próxima fecha límite de procesamiento de cuadros. Por ejemplo, iOS muestra 60 fotogramas por segundo y esto conduce a un nuevo fotograma cada 16,67 ms. Si realiza un procesamiento complejo en su bucle de eventos de javascript que genera cambios en la interfaz de usuario y tarda más de 16,67 ms, la interfaz de usuario parecerá lenta.

Una excepción son las vistas nativas que ocurren completamente en el subproceso de la interfaz de usuario, por ejemplo, navigatorIOS o scrollview se ejecutan completamente en el subproceso de la interfaz de usuario y, por lo tanto, no se bloquean debido a un subproceso js lento.

3) Subproceso de módulos nativos: a veces, una aplicación necesita acceso a la API de la plataforma, y ​​esto sucede como parte del subproceso de módulo nativo.

4) Subproceso de procesamiento: solo en Android L (5.0), el subproceso de procesamiento nativo reacciona se usa para generar comandos OpenGL reales que se usan para dibujar su interfaz de usuario.

Proceso involucrado en el trabajo de React Native

1) En el primer inicio de la aplicación, el subproceso principal comienza a ejecutarse y comienza a cargar paquetes JS.

2) Cuando el código JavaScript se ha cargado con éxito, el subproceso principal lo envía a otro subproceso JS porque cuando JS realiza algunos cálculos pesados, rellena el subproceso durante un tiempo, el subproceso de la interfaz de usuario no se verá afectado en ningún momento.

3) Cuando React comienza a renderizar, Reconciler comienza a «diferenciar», y cuando genera un nuevo DOM virtual (diseño), envía los cambios a otro hilo (hilo Shadow).

4) El subproceso de sombra calcula el diseño y luego envía los parámetros/objetos de diseño al subproceso principal (IU). (Aquí puede preguntarse por qué lo llamamos «sombra»? Es porque genera Nodes de sombra)

5) Dado que solo el subproceso principal puede representar algo en la pantalla, el subproceso de sombra debe enviar el diseño generado al subproceso principal, y solo entonces se procesa la interfaz de usuario.

Separación de React Native

En general, podemos separar React Native en 3 partes:

1) Reaccionar nativo – Lado nativo

2) Reaccionar nativo – lado JS

3) Reaccionar Nativo – Puente

Esto a menudo se llama «Las 3 partes de React Native»

Este artículo es una contribución de Saket Kumar . Si le gusta GeeksforGeeks y le gustaría contribuir, también puede escribir un artículo usando contribuya.geeksforgeeks.org o envíe su artículo por correo a contribuya@geeksforgeeks.org. Vea su artículo que aparece en la página principal de GeeksforGeeks y ayude a otros Geeks.

Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema tratado anteriormente.