رد فعل القائمة الأصلية

في هذه المقالة ، لن أخبرك أنك تحتاج إلى استخدام أقل قدر ممكن من المحتوى لعرض الصور أو تخزينها مؤقتًا. لا! سنتحدث فقط عن تحسين القائمة الحقيقية ولا يهم ما نحتاج إلى عرضه ، لأنه إذا قال العميل أنني أريد ولا يمكنك الجدال معه.

لنبدأ بأبسط مثال. لنفترض أن لدينا مصفوفة.

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