VirtualizedList:

Question

güncelleştirmesi yavaş olan büyük bir listeniz var. Çok sayıda öğeyle FlatList kullanıyorum. Expo XDE'den uyarı alıyorum. " 13861: -:

VirtualizedList emin renderItem fonksiyonu PureComponent, shouldComponentUpdate, vb { "dt" gibi performansı en iyi uygulamaları tepki izleyin bileşenleri vermektedir yapmak güncelleyebilir yavaş geniş bir listesine sahip prevDt ": 1498372326027," ContentLength ": 6624}

bazı optimizasyon örneği PureComponent benim FlatList yaklaşımlar kullanılır, ama yine de bu uyarıyı olsun. Optimizasyonlarımı anlatmadan önce, FlatList optimize edilmiş olsa da bu uyarının her zaman görünüp görünmeyeceğini söyleyebilir misiniz? Ya da belki performansla ilgili gerçek sorunları belirtti? Soruyorum çünkü FlatList'imin performansı iyidir.

Answer 1

Önceden bu hatayı görüyordum. Kodumu optimize ettikten sonra artık göremiyorum. Problemi, FlatList öğesini oluşturan Bileşenin render() işlevine ve Listedeki her öğeyi oluşturan işleve console.log() ifadesini ekleyerek çözdüm. Kodumun daha önce bu FlatList ve tüm öğeleri, bu sayfadaki herhangi bir bileşene (FlatList ile ilgili olmayan bir bileşen bile olsa) bir durum değişikliği olduğunda yeniden oluşturduğunu fark ettim. Çeşitli bileşenleri PureComponents'a dönüştürerek bunu düzeltdim.

Bu FlatList sağlar

import React, { PureComponent } from 'react'; 
class Post extends PureComponent { 

    render() { ... } 
} 

sonrası değişirse bir tek şekilde yeniden oluşturur: saf bir bileşenidir ben iade ediyorum

<FlatList 
    ref={(ref) => { this.flatListRef = ref; }} 
    data={allPosts} 
    initialNumToRender={7} 
    renderItem={({ item }) => 
     <Post postJson={item} isGroupAdmin={isGroupAdmin} user={user} /> 
    } 
    /> 

Uyarı: Burada gibi benim FlatList beyan görünüyor bu. Daha önce renderItem yani böyle bir şey yapar bir işleve normal fonksiyonunu geçerken:

return (
    <View> 
    ... 
    </View> 
); 

Ben FlatList yeniden render olduğunu herhangi bir öğe değişti her tüm öğeleri ettim. Şimdi, bir PureComponent kullanarak, FlatList sadece listeye eklenen yeni öğeyi (liste zaten görüntüleniyorsa) oluşturur. Tüm listeyi ilk kez oluşturmak için göreceli olarak uzun sürüyor. Ancak, initialNumToRender, ekranın hemen hemen doldurulmasını sağlar (kalan öğeler arka planda işlenirken). Ve daha da önemlisi, bu ilk görüntülemeden sonra, FlatList'in her seferinde bir öğeyi bir kerede (değiştiren öğe) oluşturması gerekir. this post çok yararlı). Sadece bu da düzenli Dev Modunda bu olsun here