वर्चुअलाइज्डलिस्ट: आपके पास एक बड़ी सूची है जो

Question

अपडेट करने में धीमी है I FlatList का उपयोग बड़ी संख्या में आइटम के साथ करता है। मुझे एक्सपो एक्सडीई से निम्नलिखित चेतावनी मिलती है।

VirtualizedList: आप एक बड़ी सूची है कि अद्यतन करने के लिए धीमा है - बनाने सुनिश्चित करें कि आपके renderItem समारोह घटक है कि का पालन PureComponent, shouldComponentUpdate, आदि { "डीटी" की तरह प्रदर्शन सर्वोत्तम प्रथाओं प्रतिक्रिया renders: 13,861, " prevDt ": 1498372326027," ContentLength ": 6624}

मैं कुछ अनुकूलन उदाहरण PureComponent के लिए मेरे FlatList दृष्टिकोण का इस्तेमाल किया है, लेकिन मैं अभी भी इस चेतावनी मिलता है। इससे पहले कि मैं अपने अनुकूलन का वर्णन करूंगा, क्या आप मुझे बता सकते हैं कि क्या यह चेतावनी हमेशा दिखाई देती है भले ही फ़्लैटलिस्ट को अनुकूलित किया गया हो? या शायद यह प्रदर्शन के साथ वास्तविक मुद्दों का संकेत दिया? मैं पूछता हूं क्योंकि मेरी फ्लैटलिस्ट का प्रदर्शन अच्छा है।

Answer 1

मैं पहले यह त्रुटि देख रहा था। मेरे कोड को अनुकूलित करने के बाद, अब मैं इसे नहीं देखता हूं। मैंने कंसोल.लॉग() कथन को उस घटक के रेंडर() फ़ंक्शन में जोड़कर समस्या का पता लगाया जो फ़्लैटलिस्ट बनाता है, और वह फ़ंक्शन जो प्रत्येक आइटम को सूची में प्रस्तुत करता है। मैंने देखा कि मेरा कोड पहले उस फ़्लैटलिस्ट और उसके सभी आइटमों को फिर से प्रस्तुत कर रहा था जब भी उस पृष्ठ पर किसी भी घटक में राज्य परिवर्तन होता है (यहां तक ​​कि एक घटक जो FlatList से संबंधित नहीं है)। मैंने इसे विभिन्न घटकों को PureComponents में परिवर्तित करके तय किया। जो एक शुद्ध घटक है

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

सूचना है कि मैं वापस आ रहा हूँ,:

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

    render() { ... } 
} 

यह सुनिश्चित करता है कि FlatList एक ही अगर पोस्ट परिवर्तनों को पुनः renders यहाँ की तरह क्या मेरी FlatList घोषणा लग रहा है। जब मैं पहले से renderItem यानी, किसी समारोह है कि कुछ इस तरह करता है करने के लिए एक सामान्य कार्य गुजर रहा था:

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

मैंने देखा है कि FlatList फिर से प्रतिपादन सभी आइटम जब भी किसी भी आइटम बदल गया था। अब, एक PureComponent का उपयोग करके, FlatList केवल सूची में जोड़े गए नए आइटम को प्रस्तुत करता है (यदि सूची पहले ही प्रदर्शित हो रही है)।

यह अभी भी पूरी सूची को पहली बार प्रस्तुत करने के लिए सापेक्ष लंबा लेता है। हालांकि, initialNumToRender यह सुनिश्चित करता है कि स्क्रीन बहुत तेज़ी से भरी हुई है (जबकि शेष आइटम पृष्ठभूमि में प्रस्तुत किए जाते हैं)। और सबसे महत्वपूर्ण बात यह है कि, प्रारंभिक प्रतिपादन के बाद, FlatList को केवल एक समय में एक आइटम प्रस्तुत करना होता है (वह आइटम जो बदलता है)।

मुझे this post बहुत उपयोगी मिला)।

मैं सिर्फ महसूस किया गया है यह भी समझाया गया है here