Saltar al contenido principal

Fabric

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Fabric es el nuevo sistema de renderizado de React Native, una evolución conceptual del sistema heredado. Sus principios fundamentales son unificar más lógica de renderizado en C++, mejorar la interoperabilidad con plataformas anfitrionas y desbloquear nuevas capacidades para React Native. El desarrollo comenzó en 2018 y en 2021, React Native en la aplicación de Facebook utiliza este nuevo renderizador.

Esta documentación ofrece una visión general del nuevo renderizador y sus conceptos. Evita detalles específicos de plataforma y no contiene fragmentos de código ni referencias técnicas. Cubre conceptos clave, motivación, beneficios y una descripción general del flujo de renderizado en diferentes escenarios.

Motivaciones y beneficios del nuevo renderizador​

La arquitectura de renderizado se creó para habilitar mejores experiencias de usuario imposibles con la arquitectura heredada. Algunos ejemplos incluyen:

  • Con mejor interoperabilidad entre vistas de plataforma anfitriona y vistas de React, el renderizador puede medir y renderizar superficies React de forma síncrona. En la arquitectura heredada, el diseño de React Native era asíncrono, lo que causaba "saltos" de diseño al incrustar vistas renderizadas con React Native en una vista anfitriona.

  • Con soporte para eventos síncronos y de múltiples prioridades, el renderizador puede priorizar ciertas interacciones de usuario para garantizar su manejo oportuno.

  • Integración con React Suspense que permite diseños más intuitivos para la obtención de datos en aplicaciones React.

  • Habilitar Funciones Concurrentes de React en React Native.

  • Implementación más sencilla de renderizado del lado del servidor para React Native.

La nueva arquitectura también ofrece beneficios en calidad de código, rendimiento y extensibilidad:

  • Seguridad de tipos: generación de código para garantizar seguridad de tipos entre JS y plataformas anfitrionas. La generación de código utiliza declaraciones de componentes JavaScript como fuente de verdad para crear structs C++ que almacenan las props. Las incoherencias entre props de JavaScript y del componente anfitrión generan errores de compilación.

  • Núcleo C++ compartido: el renderizador se implementa en C++ y su núcleo se comparte entre plataformas. Esto aumenta la consistencia y facilita la adopción de React Native en nuevas plataformas.

  • Mejor interoperabilidad con plataformas anfitrionas: El cálculo de diseño síncrono y seguro para hilos mejora la experiencia al incrustar componentes anfitriones en React Native, facilitando la integración con frameworks de plataforma que requieren APIs síncronas.

  • Rendimiento mejorado: Con la nueva implementación multiplataforma del sistema de renderizado, todas las plataformas se benefician de mejoras de rendimiento motivadas por limitaciones de una sola plataforma. Por ejemplo, el aplanamiento de vistas fue originalmente una solución de rendimiento para Android y ahora está disponible por defecto en Android e iOS.

  • Consistencia: El nuevo sistema de renderizado es multiplataforma, lo que facilita mantener la coherencia entre diferentes plataformas.

  • Inicio más rápido: Los componentes anfitriones se inicializan de forma diferida (lazy) por defecto.

  • Menos serialización de datos entre JS y plataforma anfitriona: React solía transferir datos entre JavaScript y plataforma anfitriona como JSON serializado. El nuevo renderizador mejora la transferencia accediendo directamente a valores JavaScript mediante Interfaces JavaScript (JSI).