Native Listing reagieren

In diesem Artikel werde ich Ihnen nicht sagen, dass Sie so wenig Inhalt wie möglich verwenden müssen, um Bilder anzuzeigen oder zwischenzuspeichern. Nein! Wir werden nur über echte Listenoptimierung sprechen und es spielt keine Rolle, was wir anzeigen müssen, denn wenn der Kunde sagt, dass ich will und Sie nicht mit ihm streiten können.

Beginnen wir mit dem einfachsten Beispiel. Nehmen wir an, wir haben ein Array.

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

Was ist der einfachste Weg, um eine kleine Liste zu rendern? Es ist richtig, eine Methode zu verwenden .map, die ein neues Array zurückgibt, und wir können die gesamte Liste anzeigen. Schauen wir uns ein Beispiel an:

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

        </View>
    )  
}  

Korrekt? Nein! TU das niemals!

• Zunächst müssen Sie immer den Schlüssel für jedes Element angeben. Und bitte nicht für dieses Indexelement im Array verwenden. Im Folgenden werde ich Ihnen sagen, warum.
• Zweitens sieht der Code chaotisch aus
• Drittens verwenden Sie keine anonymen Funktionen

Warum nicht so:

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

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

oder so:

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

Ist es jetzt viel besser? Nicht wirklich.

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