reaccionar nativo 100+ elementos flatlist rendimiento muy lento

Te recomendamos que pruebes esta respuesta en un ambiente controlado antes de enviarlo a producción, un saludo.

Solución:

Aquí están mis sugerencias:

A. Evite la función de flecha anónima en renderItem accesorios.

Mover fuera de la renderItem función al exterior de la función de procesamiento, por lo que no se recreará cada vez que se llame a la función de procesamiento.

B. Intenta agregar initialNumToRender apoyo en su FlatList

Definirá cuántos elementos se renderizarán por primera vez, podría ahorrar algunos recursos con muchos datos.

C. Definir el key prop en su componente de artículo

Simplemente evitará volver a renderizar en elementos agregados/eliminados dinámicamente con definido key en cada artículo. Asegúrese de que sea único, no use index como el key! También puedes usar keyExtractor como alternativa.

D. Optimización opcional

Trate de usar getItemLayout para omitir la medición del contenido dinámico. También hay un accesorio llamado maxToRenderPerBatch, windowSize que puede usar para limitar la cantidad de elementos que renderizará. Consulte el documento oficial de VirtualizedList o FlatList.

E. ¡Hablar es barato, muéstrame el código!

// render item function, outside from class's `render()`
const renderItem = ( item ) => (item.key);

// we set the height of item is fixed
const getItemLayout = (data, index) => (
  length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index
);

const items = [ key: 'a' ,  key: 'b', ...+400];

function render () => (
  
);

Pruebe esta vista de lista https://github.com/Flipkart/ReactEssentials, muestra muchos menos elementos que FlatList y luego los recicla. Debería ser mucho más rápido.

npm install --save recyclerlistview

mira este enlace

https://github.com/filipemerker/flatlist-performance-tips

Ejemplo

FlatList
    containerContentStyle=styles.container
    data=countries
    renderItem=( item ) => (
      
        
      
    )
    keyExtractor=item => item.alpha2code
    ListHeaderComponent=() => this.renderHeader()

    // Performance settings
    removeClippedSubviews=true // Unmount components when outside of window 
    initialNumToRender=2 // Reduce initial render amount
    maxToRenderPerBatch=1 // Reduce number in each render batch
    updateCellsBatchingPeriod=100 // Increase time between renders
    windowSize=7 // Reduce the window size
  />

Sección de Reseñas y Valoraciones

Te invitamos a defender nuestra faena añadiendo un comentario o dejando una valoración te estamos agradecidos.

---

---

Utiliza Nuestro Buscador