部分列表意外地重新呈现所有内容

Question

我是React-Native的新手，目前正在处理一个显示照片及其相关信息的项目。该项目使用标准SectionList(RN 0.55)。

我遇到的问题是每次添加照片时，列表中的所有子组件都将重新渲染。我注意到当列表增长到50个时，速度会显着放缓。

我有以下设置：

1. 我有一个包含Data的 redux 存储(基本上是照片信息的包装器)，每次用户执行某些操作时，Data将被复制、修改，然后重新分配回 redux 存储。

2. 然后我有一个像下面这样的类来渲染部分列表

class PhotoList extends PureComponent {
render() {
<SectionList
sections={deriveData(this.props.data)}
extraData={this.state}
renderItem={this.onRenderItem} 
>
}
onRenderItem(item) {
return <View>
// two nested level components to hold information
</View>
}
driveData(data) {
// do a lot of data transformation and calculate derived value
return derivedData;
}
}
// data is redux connected

我的主要困惑点是，当我的情况中SectionListsection时，数据(作为一个整体)已经是一个新的副本并且被修改了(因为添加了新照片)，所以它会导致SectionList重新渲染所有内容？

我希望SectionList只额外渲染我刚刚添加的照片，有什么建议吗？

Answer 1

您能否在操作时更改数据("数据转换和计算派生值")并在 redux "data" 上更新它。然后像下面这样更改。

class PhotoList extends PureComponent {
render() {
<SectionList
sections={this.props.data} // Directly call data
extraData={this.props.data}
renderItem={this.onRenderItem} 
>
}
onRenderItem(item) {
return <View>
// two nested level components to hold information
</View>
}
}

如果你使用redux，那么你必须在redux上处理数据更新。然后只会得到结果。