रिएक्टिव नेटिव लिस्टिंग

इस लेख में, मैं आपको यह नहीं बताऊंगा कि आपको छवियों को प्रदर्शित करने या कैश करने के लिए यथासंभव कम सामग्री का उपयोग करने की आवश्यकता है। नहीं! हम केवल वास्तविक सूची अनुकूलन के बारे में बात करेंगे और इससे कोई फर्क नहीं पड़ता कि हमें क्या प्रदर्शित करने की आवश्यकता है, क्योंकि यदि ग्राहक कहता है कि मैं चाहता हूं और आप उसके साथ बहस नहीं कर सकते।

सबसे सरल उदाहरण से शुरू करते हैं। मान लीजिए कि हमारे पास एक सरणी है।

const list = [{ _id: 567456, label: “CodingChipmunks” }, ...]  

छोटी सूची को प्रस्तुत करने का सबसे आसान तरीका क्या है? ऐसी विधि का उपयोग करना सही है .mapजो एक नई सरणी देता है और हम पूरी सूची प्रदर्शित कर सकते हैं। खैर, आइए एक उदाहरण देखें:

render() {  
    return (
        <View>
            {list.map((item) => (  
                <View>  
                    <Text>{item.label}</Text>  
                <View>))}

        </View>
    )  
}  

सही ढंग से? नहीं! कभी मत करो!

• सबसे पहले, आपको हमेशा प्रत्येक आइटम के लिए कुंजी निर्दिष्ट करने की आवश्यकता होती है। और कृपया इस इंडेक्स एलिमेंट का उपयोग ऐरे में न करें। नीचे मैं आपको बताऊंगा कि क्यों।
• दूसरे, कोड गड़बड़ दिखता है
• तीसरा, अनाम कार्यों का उपयोग न करें

ऐसा क्यों नहीं करते:

renderItem = (item) => (
    <View key={item._id}>  
        <Text>{item.label}</Text>  
    <View>
)

render() {  
    return (
    <View>
        {list.map((item) => this.renderItem(item)}
    </View>)  
}  

या ऐसा:

const Item = (item) => (  
    <View >  
        <Text>{item.label}</Text>  
    <View>  
)

class List extends React.Component {  
…

render() {  
    return (
        <View>
            {list.map((item) => <Item key={item._id} />}
        </View>)  
    }  
}

क्या यह अब बेहतर है? ज़रुरी नहीं।

. .map. render item . . . - . ? ,

.
“? ? ? ?” .

:

    render() {  
        return (
            <View>
                {list.map(this.renderItem)}
            </View>
        )  
    }

PureComponent item.

!

class Item extends React.PureComponent {
...
}

!

?

. . ? FlatList. Flatlist ? . .
:

const list = [loyaltyCard1, loyaltyCard2, … , loyaltyCard100];
…
renderItem = ({ item: loyaltyCard, index }) => (...)

keyExtractor = loyaltyCard => loyaltyCard._id  

render() {  
    <FlatList
        keyExtractor={this.keyExtractor} 
        data={list}
        renderItem={this.renderItem} />  
}

key, keyExtractor, .
renderItem :

1. item —
2. index —
3. separator —

?

, extraData. .

getItemLayout.

ReactNative

getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}  

? getLayout

onLayout = (event) => {  
    const {x, y, width, height} = event.nativeEvent.layout;  
    do something with layout
}
…
renderItem = ({ item: loyaltyCard, index}) => (
    <View onLayout={this.onLayout} />
)

? initialNumToRender maxToRenderPerBatch. .

initialNumToRender .
maxToRenderPerBatch

• lazyLoad onEndReached onEndReachedThreshold .

.

?
removeClippedSubviews — true .

• .

getItemLayout.

. ReactNative