Reaccionar listado nativo

En este artículo, no le diré que necesita usar la menor cantidad de contenido posible para mostrar o almacenar en caché las imágenes. ¡No! Solo hablaremos sobre la optimización de listas reales y no importa lo que necesitemos mostrar, porque si el cliente dice que quiero y no puede discutir con él.

Comencemos con el ejemplo más simple. Digamos que tenemos una matriz.

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

¿Cuál es la forma más fácil de representar una lista pequeña? Es correcto utilizar un método .mapque devuelve una nueva matriz y podemos mostrar la lista completa. Bueno, veamos un ejemplo:

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

        </View>
    )  
}  

¿Correctamente? ¡No! ¡Nunca hagas eso!

• Primero, siempre debe especificar la clave para cada elemento. Y no lo use para este elemento de índice en la matriz. A continuación te diré por qué.
• En segundo lugar, el código parece desordenado
• Tercero, no use funciones anónimas

¿Por qué no hacerlo así?

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

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

más o menos:

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

¿Es mucho mejor ahora? Realmente no.

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