React Native 列表性能答案

【问题标题】：React Native List performanceReact Native 列表性能
【发布时间】：2017-09-05 20:34:53
【问题描述】：

我的应用程序的 Modal 中有一个 FlatList，Flatlist 中填充了来自“react-native-elements”的 ListItem 组件。

ListItems 只有一个标题和一个 onPress 方法，没有别的，但列表有 250-300 个项目。该列表非常滞后。我知道很多项目都会发生这种情况，但是对于列表，我无法立即滚动到底部。我可以滚动一段距离，然后它会加载接下来的几个项目，然后再滚动一点，然后再加载一点等等。这使得选择列表中较低或底部的项目非常慢。

我的数据是一个 { imgnames: "imglink" } 对象数组，列表按字母顺序排序。

我想知道这个性能问题是否会发生，不管是因为项目的数量，还是因为它在模块内部。

我只想能够立即滚动整个列表长度，这样我就可以直接滚动到“M”或“P”部分，然后在列表呈现时有一点延迟。

最好的列表实现是什么。

平面列表代码：

<FlatList 
        data={this.props.list} 
        renderItem={
            ({item}) => <ListItem hideChevron = {true} onPress={() => this._setImage(item.imgLink)} title={item.key} removeClippedSubviews = {true} initialNumToRender={5}/>
  }/>

【问题讨论】：

你试过设置Initial Number To Render吗？
@bennygenel 是的，我现在将它设置为 250，我有这个问题，我不知道该设置是否有限制，但它似乎一次只能加载 5-20
您应该将其设置为一个较小的数字，以便 FlatList 快速呈现，然后向下滚动时不会出现性能问题。
@bennygenel 我刚刚尝试将其设置为 5，但我仍然会停止/开始滚动，而不是能够平滑地直接滚动到底部
@bennygenel 大便，这是因为我将 initailRenderNum 和 removeClipping 添加到 ListItem 而不是 FlatList。如果您愿意，可以将其写成我接受的实际答案，感谢您的帮助

标签： performance list reactjs listview react-native

【解决方案1】：

设置 initailRenderNum 和 removeClipping 属性应该有助于解决 FlatList 的性能问题。

例子：

<FlatList 
    data={this.props.list} 
    removeClippedSubviews={true} 
    initialNumToRender={5}
    renderItem={
        ({item}) => <ListItem hideChevron={true} onPress={() => this._setImage(item.imgLink)} title={item.key} />
  }/>

【讨论】：