Aplanamiento de Vistas
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Este documento hace referencia a la Nueva Arquitectura, que se está implementando activamente.
El aplanamiento de vistas es una optimización del renderizador de React Native para evitar árboles de diseño profundos.
La API de React está diseñada para ser declarativa y reutilizable mediante composición. Esto proporciona un gran modelo para desarrollo intuitivo. Sin embargo, en la implementación, estas cualidades de la API llevan a crear árboles de elementos React profundos, donde la mayoría de nodos solo afectan el diseño de una vista sin renderizar nada en pantalla. Llamamos a estos nodos "Layout-Only" (solo diseño).
Conceptualmente, cada nodo del árbol de elementos React tiene relación 1:1 con una vista en pantalla, por lo que renderizar un árbol profundo compuesto principalmente por nodos "Layout-Only" genera bajo rendimiento durante el renderizado.
Este es un caso de uso común afectado por el costo de las vistas "Layout Only":
Imagina que quieres renderizar una imagen y un título manejados por TitleComponent, e incluyes este componente como hijo de ContainerComponent que tiene estilos de margen. Tras descomponer los componentes, el código React se vería así:
function MyComponent() {
return (
<View> // ReactAppComponent
<View style={{margin: 10}} /> // ContainerComponent
<View style={{margin: 10}}> // TitleComponent
<Image {...} />
<Text {...}>This is a title</Text>
</View>
</View>
</View>
);
}
Como parte del proceso de renderizado, React Native producirá estos árboles:
Nota que las Vistas (2) y (3) son "Layout Only" porque se renderizan en pantalla pero solo aplican un margin de 10 px sobre sus hijos.
Para mejorar el rendimiento en estos árboles, el renderizador implementa un mecanismo de aplanamiento de vistas que fusiona estos nodos, reduciendo la profundidad de la jerarquía de vistas del host renderizada. Este algoritmo considera props como: margin, padding, backgroundColor, opacity, etc.
El algoritmo de aplanamiento está integrado en la etapa de diffing del renderizador, lo que significa que no usa ciclos de CPU adicionales para optimizar el árbol. Como el resto del núcleo, está implementado en C++ y sus beneficios aplican por defecto en todas las plataformas soportadas.
En el ejemplo anterior, las Vistas (2) y (3) se aplanarían durante el "diffing algorithm", fusionando sus estilos en la Vista (1):
Es crucial destacar que esta optimización evita la creación y renderizado de dos vistas del host. Para el usuario no hay cambios visuales perceptibles en pantalla.