仅更改一项时，如何防止整个项目列表重新呈现？ （用钩子反应本机）

Question

我一直在使用React Native（hook版本）中的列表。我有一个返回这样的项目列表的函数。

function toDisplay (what) {
    let dataList = [];

    if (what === 'List 1')  dataList = MobXStore.listOne
    else if (what === 'List 2') dataList = MobXStore.listTwo

    return (
        <ScrollView>
            {
                dataList ? dataList.map((item,index) =>
                    <ListItem
                        key={index + item.id}
                        containerStyle={{
                            backgroundColor: index % 2 === 0 ? 'black' : '#0a0a0a',
                        }}
                        leftAvatar={{source: {uri: item.image}, size: 75}}
                        title={item.title}
            }
        </ScrollView>
    )
}

列表中只有一次更改时。 React似乎重新渲染了整个列表。但这似乎并非每次都发生。有没有办法每次都只影响那个物品？

Answer 1

最好用Flatlist替换Scrollview：

                <FlatList  
                    data={dataList}  
                    renderItem={({item}) =>  <Text>{item.data}</Text>}  
                    keyExtractor={item => `listkey${item.id}`}
                />  

使用keyExtractor属性，避免每次将项目添加到列表时重新渲染整个列表