☔️ 🚣🏿 🏼 反应本机列表 🍙 👰 👩🏿‍🤝‍👨🏽

在本文中，我不会告诉您您需要使用尽可能少的内容来显示或缓存图像。没有！我们只会谈论真实的列表优化，而我们需要显示的内容并不重要，因为如果客户说我想要并且您无法与他争论。

让我们从最简单的示例开始。假设我们有一个数组。

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

呈现小清单的最简单方法是什么？使用.map返回新数组的方法是正确的，我们可以显示整个列表。好吧，让我们看一个例子：

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

        </View>
    )  
}

正确吗？没有！绝对不要那样做！

首先，您始终需要为每个项目指定密钥。并且请不要在数组中将此索引元素使用。下面我会告诉你为什么。
其次，代码看起来很凌乱
三，不要使用匿名函数

为什么不这样做：

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

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

或者：

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

现在好多了吗？并不是的。

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

item —
index —
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

反应本机列表

?

More articles: