Reagir lista nativa

Neste artigo, não informarei que você precisa usar o mínimo de conteúdo possível para exibir ou armazenar em cache as imagens. Não! Falaremos apenas sobre otimização de lista real e não importa o que precisamos exibir, porque se o cliente diz que eu quero e você não pode discutir com ele.

Vamos começar com o exemplo mais simples. Digamos que temos uma matriz.

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

Qual é a maneira mais fácil de renderizar uma pequena lista? É correto usar um método .mapque retorna uma nova matriz e podemos exibir a lista inteira. Bem, vejamos um exemplo:

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

        </View>
    )  
}  

Corretamente? Não! Nunca faça isso!

• Primeiro, você sempre precisa especificar a chave para cada item. E por favor, não use para este elemento de índice na matriz. Abaixo vou lhe dizer o porquê.
• Em segundo lugar, o código parece confuso
• Terceiro, não use funções anônimas

Por que não fazer assim:

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

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

ou então:

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á muito melhor agora? Na verdade não.

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