¿Qué es un puente en React Native?

Una aplicación React Native consta de dos lados, como se indica a continuación.

1. El lado de JavaScript
2. El lado nativo

El lado nativo debe ser Java o Kotlin para Android y Swift u Objective-C para iOS.

La gran razón de la popularidad de React Native es que se puede crear un puente entre el código JavaScript y el lenguaje nativo. React Native está desarrollado de manera que podamos producir un puente entre el código JavaScript y el idioma nativo. El puente en React Native permite que el código JavaScript y el código nativo interactúen entre sí. Sin el puente en React Native, no hay absolutamente ningún medio para que el código nativo transmita información al código JavaScript y viceversa.

Necesidad de Bridge en React Native: supongamos que necesitamos reutilizar algunas bibliotecas Java existentes sin implementarlas nuevamente en JavaScript. Entonces, podemos reutilizarlo en nuestra aplicación React Native con el uso de Native Bridge. En ocasiones, para construir una aplicación a nivel de producción, lo más probable es que necesitemos utilizar Native Bridge.

Funcionamiento del puente: cuando presionamos el ícono de nuestra aplicación para abrir nuestra aplicación, el sistema operativo diseña el hilo principal (también conocido como hilo de interfaz de usuario) y asigna este hilo a nuestra aplicación. Este subproceso principal crea el subproceso de JavaScript y el subproceso de sombra (también conocido como el árbol de sombra). La tarea del subproceso de sombra es calcular los diseños descritos en el lado de JavaScript y redirigir ese detalle al lado nativo. Las vistas se configuran en JavaScript, se calculan en el árbol de sombras y se redirigen al subproceso de la interfaz de usuario.

Envío de datos: ahora sabemos cómo se describen los diseños al principio, pero ¿qué sucede después de que la aplicación comienza a ejecutarse? ¿Qué sucede cuando necesitamos dañar un botón? ¿Este detalle se envía a través del puente?

Para perjudicar un botón, podemos configurar una función en el lado de JavaScript que se redirigirá por encima del puente como un objeto JSON serializado. Las mejoras en las vistas nativas se agrupan simultáneamente y se redireccionan sobre el lado nativo al final de todas las iteraciones del ciclo de eventos.

Además de pasar propiedades, podemos pasar una función que ejecutará código JavaScript como reacción a varios eventos en el lado nativo (como presionar el botón). Tomamos nota de esta devolución de llamada en JavaScript, que se serializa y se redirige al lado nativo. Cuando presionamos el botón, el evento nativo se redirige al dominio de JavaScript y se realiza la devolución de llamada. Ahora, también podemos redirigir eventos desde el lado nativo al lado de JavaScript directamente sin utilizar una devolución de llamada. El problema es que si comenzamos esta interactividad en el lado nativo, entonces no somos conscientes de quién está prestando atención al lado de JavaScript, que puede activar pasos no deseados y que pueden dificultar la depuración de nuestro código. Además, tiene sentido hacer uso de las devoluciones de llamada del lado JS, excepto que tenga una razón definida para no hacerlo.

Ejecución: La mayoría de las veces todo pasa de manera constante, pero a veces, como un puente original, tiene atascos de tráfico. Cuando hay un gran catálogo de artículos y comenzamos a desplazarnos rápidamente, es posible que reconozcamos una pantalla en blanco antes de que se transmitan el resto de los artículos. Esto sucede porque el evento nativo onScroll se redirige al subproceso de JavaScript, el subproceso de JavaScript transmite el nuevo detalle del diseño al árbol de sombra, el árbol de sombra calcula el diseño y lo redirige al lado nativo. Mientras nos desplazamos rápidamente recogemos estos eventos que dan lugar a un atasco de tráfico sobre el puente. Podemos intentar escapar de esto calculando previamente los diseños, para cruzar el puente varias veces. Al ejecutar animaciones complejas podemos obtener problemas de ejecución similares. 

Exploremos ahora en profundidad y reconozcamos cómo funciona React Native bajo el capó y esto nos ayudará a comprender la compilación de JavaScript a un código nativo y el funcionamiento de todo el procedimiento. Es importante reconocer cómo funciona todo el procedimiento, de modo que, a veces, si tiene problemas de rendimiento, reconocerá dónde se origina este problema.

Flujo de información: como hemos discutido, las ideas de React que potencian React Native, y una de ellas es que la interfaz de usuario es una función de los datos. Puede convertir la condición y los avisos de React que se actualizarán. Ahora supongamos cómo fluyen los detalles junto con la aplicación React habitual. Explora el diagrama que se muestra a continuación:

Explicación del diagrama anterior:

1. Tenemos una sección Reaccionar, que continúa con los detalles de tres secciones secundarias.
2. Lo que está ocurriendo de forma anónima es que se genera un árbol DOM virtual, constituyendo estas jerarquías de secciones.
3. Cuando se actualiza la condición de la sección principal, React advierte que cómo proceder detalla a los elementos secundarios.
4. Como los niños son principalmente una representación de la interfaz de usuario, React reconoce cómo agrupar las actualizaciones del DOM del navegador y las implementa.

Ahora separemos el DOM del navegador y supongamos que, en lugar de agrupar las actualizaciones del DOM del navegador, React Native hace lo mismo a cambio con las llamadas a los módulos nativos. Por lo tanto, los detalles de los módulos nativos se pueden realizar de dos maneras, que se detallan a continuación:

1. Datos mutables compartidos
2. Mensajes serializables intercambiados entre JavaScript y módulos nativos

React Native usa el segundo método, que son mensajes serializables intercambiados entre JavaScript y módulos nativos. En lugar de mutar datos en objetos compartibles, procede a enviar mensajes agrupados serializados de forma asincrónica al Bridge of React Native. El puente en React Native es la capa que permite que el código JavaScript y el código nativo interactúen entre sí.

Arquitectura: El siguiente es el diagrama que explica la estructura de la arquitectura React Native:

Tres capas se indican en el diagrama de arriba:

1. JavaScript
2. Puente
3. Nativo

El puente en React Native es la capa que permite que JavaScript y los módulos nativos interactúen entre sí y es principalmente una capa portadora que conduce mensajes de retroalimentación agrupados cronológicamente no paralelos desde JavaScript a los módulos nativos. En la imagen que se muestra arriba, la capa nativa se muestra en último lugar, ya que esta capa es la más cercana al dispositivo. 

Cuando se implementa un incidente en la capa nativa, puede ser un temporizador, un toque o una solicitud de red, principalmente, cualquier incidente que asocie módulos nativos del dispositivo. Sus datos se ensamblan y estos datos se envían a React Native Bridge como un mensaje serializado. Después de eso, Bridge envía este mensaje a la capa de JavaScript.

La capa de JavaScript es un bucle de incidentes. Después de que React Native Bridge continúa con la carga útil serializada a JavaScript, el incidente se procesa y la lógica de la aplicación se activa.

Modelo de subprocesos: ahora, después de todo lo que hemos discutido anteriormente, es importante reconocer que todas las cosas discutidas anteriormente se realizan en tres subprocesos principales:

1. UI (el hilo principal de la aplicación)
2. Módulos nativos
3. Tiempo de ejecución de JavaScript

Entendamos acerca de cada uno de los hilos anteriores:

La interfaz de usuario (el hilo principal de la aplicación): es el hilo nativo donde tiene lugar la percepción del nivel nativo y es el lugar donde nuestra plataforma de opciones, como iOS o Android, lleva a cabo el dibujo, el estilo y la medición.

Módulos nativos: si la aplicación accede a cualquier API nativa, el acceso se realiza en un subproceso de módulos nativos diferente. Por ejemplo, si se accede a la cámara, la ubicación, las fotos y cualquier otra API nativa, generalmente también se concluyen arreglos e indicaciones en este hilo.

Tiempo de ejecución de JavaScript: es el hilo donde se ejecutará cada código de aplicación de JavaScript. Después de todo, se basa en un bucle de incidentes de JavaScript, por lo que es más estable que el subproceso de la interfaz de usuario. Por lo tanto, cuando se realizan cálculos complicados en una aplicación que realiza muchos cambios en la interfaz de usuario, estos pueden dar lugar a un rendimiento deficiente.