SectionList 意外地重新渲染所有内容答案

【问题标题】：SectionList re-renders everything unexpectedlySectionList 意外地重新渲染所有内容
【发布时间】：2019-06-14 07:16:34
【问题描述】：

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

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

我有以下设置：

我有一个包含 Data（基本上是照片信息的包装器）的 redux 存储，每次用户执行某些操作时，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 只额外渲染我刚刚添加的照片，有什么建议吗？

【问题讨论】：

函数可能会在每次调用 render 时返回一个新数组。

标签： react-native redux react-native-sectionlist

【解决方案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 上处理数据更新。那么只有结果才会得到。

【讨论】：