React Native Listing

Dans cet article, je ne vous dirai pas que vous devez utiliser le moins de contenu possible pour afficher ou mettre en cache des images. Non! Nous ne parlerons que de l'optimisation de la liste réelle et peu importe ce que nous devons afficher, car si le client dit que je veux et que vous ne pouvez pas discuter avec lui.

Commençons par l'exemple le plus simple. Disons que nous avons un tableau.

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

Quelle est la façon la plus simple de rendre une petite liste? Il est correct d'utiliser une méthode .mapqui renvoie un nouveau tableau et nous pouvons afficher la liste entière. Eh bien, regardons un exemple:

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

        </View>
    )  
}  

Correctement? Non! Ne fais jamais cela!

• Tout d'abord, vous devez toujours spécifier la clé pour chaque élément. Et veuillez ne pas utiliser cet élément d'index dans le tableau. Ci-dessous, je vais vous expliquer pourquoi.
• Deuxièmement, le code semble désordonné
• Troisièmement, n'utilisez pas de fonctions anonymes

Pourquoi ne pas le faire comme ça:

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

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

ou alors:

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

Est-ce que c'est beaucoup mieux maintenant? Pas vraiment.

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