React Native：在 FlatList 中调用 setState 比在 ScrollView 中调用 setState 慢得多答案

【问题标题】：React Native: Calling setState in FlatList much slower than setState in ScrollViewReact Native：在 FlatList 中调用 setState 比在 ScrollView 中调用 setState 慢得多
【发布时间】：2019-11-22 12:59:44
【问题描述】：

我正在渲染一个联系人列表，每个联系人都有一个触发设置状态的可点击图标。这是 FlatList 版本：

<FlatList
  data={this.state.contacts}
  renderItem={({item, index}) => <Contact
    contact={item}
    image={this.getImage(item)}
    active={item.id in this.state.active}
    toggleActive={this.toggleActive} />}
  keyExtractor={(item, idx) => idx.toString()}
  refreshing={false} />

这是 ScrollView 版本：

<ScrollView style={styles.scroll}>
  {this.state.contacts.map(c => (
    <Contact key={c.id}
      contact={c}
      image={this.getImage(c)}
      active={c.id in this.state.active}
      toggleActive={this.toggleActive} />
  ))}
</ScrollView>

Contact 组件和其他所有组件在这两者之间保持不变，只有滚动容器的类型（FlatList 与 ScrollView）发生了变化。但是，ScrollView 保持了 60 FPS 的速度，而在调用 setState 之后，JS 线程上的 FlatList 下降到 ~10 FPS。这是预期的行为，还是我错过了什么/做错了什么？

【问题讨论】：

看看这里 - stackoverflow.com/questions/55256221/flatlist-vs-scrollview
你可以使用一个名为 react-native-optimized-flatlist 的包，它说它可以提高性能
我想我很困惑，因为所有关于 FlatList v ScrollView 的讨论都分析了渲染性能。我正在研究事件触发性能的差异。我不清楚为什么 ScrollView 会比 FlatList 更快地调用 setState 事件。 expo 日志系统（我用来评估何时触发事件）可能会延迟控制台日志，而 JS 线程中 FPS 的实际下降是由于 rendering的开销增加所致> FlatList 子组件...

标签： javascript reactjs react-native expo

【解决方案1】：

ScrollView 在数据全部加载后呈现数据，而 flatList 在您滚动时加载；它只加载屏幕可以呈现的内容，这就是为什么如果您快速滚动可以看到空白区域。它在 RN 的文档中说：

为了限制内存并实现平滑滚动，内容在屏幕外异步呈现。这意味着滚动速度可能快于填充率并暂时看到空白内容。这是一种权衡，可以根据每个应用程序的需求进行调整，我们正在努力在幕后对其进行改进。

【讨论】：