Question

我想对大数据使用FlatList，此数据由服务器分页，我使用onEndReached函数获取新项目（滚动时加载更多数据），然后将结果添加到当前数据中（存储在{ {1}}变量）。

state

但是每次我使用此方法时，FlatList都会渲染所有项目（完全重新渲染）所以我得到错误：

VirtualizedList：您有一个很大的列表，更新很慢-make 确保您的renderItem函数呈现遵循React的组件性能最佳做法，例如PureComponent，shouldComponentUpdate，等

我将 PureComponent 用于我的列表项，但这并不是渲染项目的问题（使用日志，我注意到每个组件都会渲染一次），仅FlatList可以进行完整渲染state.data更改时的操作。

请帮助我如何解决此问题谢谢

编辑： renderItem函数：

this.setState({data: this.state.data.concat(res.data)})

和我的单位列表：

_renderSection(info) {
        if(info.item.isHeaderSection) {
            return (
                <ArtistBundleItem
                    style={styles.bundle}
                    bundle={info.item}
                />
            );
        } else {
            return(
                <ArtistItem3
                    title={info.item.name}
                    imageUrl={Constants.media.url(info.item.thumbnail)}
                    bgImageUrl={Constants.media.url(info.item.wallpaper)}
                    followers={info.item.followers}
                />
            );
        }
    }

Answer 1

使用Flatlist的extraData属性。这样可以确保FlatList仅在将新数据添加到状态时才重新呈现。

在您的情况下： extraData = {this.state.data}

此外，我不确定在渲染内部进行绑定是否是一种好习惯。在许多优化建议中，他们都说绑定应该在构造函数中完成，如下所示。这对我来说提高了很多性能。

  constructor(props) {
    super(props);
    this.state = {};
    this._renderSection = this._renderSection.bind(this);
  }

并在您的FlatList中：

renderItem={this._renderSection}

此外，请确保密钥是唯一的，并且在进行重新渲染时不会更改。查看您的代码，我认为您是对的。

Answer 2

问题不在于您以该状态存储数据。

问题出在您的_renderSection函数正在渲染的组件中。

如警告所述：make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

因此，您必须检查并更改renderItem函数提供的组件，在您的情况下为ArtistBundleItem和ArtistItem3。

查看this链接以了解操作方法。

如何在不使用状态的情况下使用FlatList

2 个答案: