1

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

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

我有以下设置：

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

  2. 然后我有一个像下面这样的类来渲染 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额外渲染我刚刚添加的照片，有什么建议吗？

4

1 回答 1

0

您可以在操作中更改数据（“数据转换和计算派生值”）并在 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 上处理数据更新。那么只有结果才会得到。

于 2019-06-14T07:28:29.917 回答