Bereaksi Daftar Asli

Dalam artikel ini, saya tidak akan memberi tahu Anda bahwa Anda perlu menggunakan sesedikit mungkin konten untuk menampilkan atau menyimpan gambar. Tidak! Kami hanya akan berbicara tentang pengoptimalan daftar nyata dan tidak masalah apa yang perlu kami tampilkan, karena jika klien mengatakan saya ingin dan Anda tidak dapat berdebat dengannya.

Mari kita mulai dengan contoh paling sederhana. Katakanlah kita memiliki array.

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

Apa cara termudah untuk membuat daftar kecil? Memang benar untuk menggunakan metode .mapyang mengembalikan array baru dan kita dapat menampilkan seluruh daftar. Baiklah, mari kita lihat satu contoh:

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

        </View>
    )  
}  

Benar? Tidak! Tidak pernah melakukannya!

• Pertama, Anda selalu perlu menentukan kunci untuk setiap item. Dan tolong jangan gunakan untuk elemen indeks ini dalam array. Di bawah ini saya akan memberi tahu Anda alasannya.
• Kedua, kodenya terlihat berantakan
• Ketiga, jangan gunakan fungsi anonim

Mengapa tidak melakukannya seperti ini:

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

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

atau lebih:

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>)  
    }  
}

Apakah sekarang jauh lebih baik? Tidak juga.

. .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