¿Cuándo usamos ScrollView sobre FlatList o viceversa?

ScrollView: el componente ScrollView es un componente nativo de reacción incorporado que sirve como un contenedor desplazable genérico, con la capacidad de desplazar componentes secundarios y vistas dentro de él.

¿Cuándo usar ScrollView?

ScrollView carga todo el contenido, es decir, los datos que se mostrarán en pantalla a la vez. Esto se hace inmediatamente después de cargar el componente. Por lo tanto, todo el contenido (lista de datos) se monta en conjunto. Ahora, si esta lista de datos contiene muchos elementos, automáticamente causaría problemas de rendimiento. Por lo tanto, no es preferible usar ScrollView si tiene cien o mil elementos para mostrar en la pantalla. Se usa cuando tiene menos elementos de datos en la lista de un tamaño limitado.

Flatlist: el componente FlatList es un componente nativo de reacción incorporado que muestra datos estructurados de manera similar en una lista desplazable. Muestra solo aquellos elementos que se están mostrando actualmente en la pantalla.

¿Cuándo usar FlatList?

A diferencia de ScrollView, FlatList representa solo aquellos elementos que se muestran actualmente en la pantalla (predeterminado: 10 elementos). Por lo tanto, no tiene ningún impacto en el rendimiento de la aplicación. Por lo tanto, es preferible utilizar el componente FlatList para mostrar una gran lista de datos. 
 

Las diferencias clave entre ScrollView y Flatlist son:

Vista de desplazamiento FlatList
No proporciona ninguna gestión de memoria. Proporciona gestión de memoria automática.
Carga todo el contenido a la vez. Carga contenido a medida que se desplaza la ventana.
Da como resultado una representación lenta y un mayor uso de la memoria. No afecta la velocidad de renderizado. 
Mantiene el estado del componente. No mantiene el estado del componente.
Representa contenido genérico en un contenedor desplazable. Muestra una lista de elementos similares.
Se puede importar desde reaccionar nativo como: 
import {ScrollView} from ‘react-native’ ;
Se puede importar desde React Native como: 
import {FlatList} from ‘react-native’;

Publicación traducida automáticamente

Artículo escrito por verma_anushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *