Question

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

我的问题是，每次添加照片时，列表中的所有子组件都会重新渲染。而且，当列表增加到50多个时，我注意到速度明显下降。

我有以下设置：

我有一个redux存储，其中包含Data（基本上是照片信息的包装），每次用户执行某些操作时，Data将被复制，修改，然后重新分配给redux商店。
然后我有一个类似于以下的类来渲染SectionList

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

我的主要困惑是，在我的情况下，当SectionList接受section时，数据（整体上）已经是新副本并被修改（因为添加了新照片），因此会导致SectionList重新呈现所有内容？

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

Answer 1

您是否可以在操作时更改数据（“数据转换和计算派生值”），并在redux“数据”上更新数据。然后按如下所示进行更改。

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上的数据更新。然后只有结果会得到。

SectionList意外重新呈现所有内容

1 个答案: