Question

在react-native FlatListview中，我想在列表中添加一个新项目。

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

data来自API，添加了密钥a和b 即data = [{key: 'a'}, {key: 'b'},{key: 'c'}]

每当新密钥进入时，它都会呈现整个列表视图，这会产生一些性能问题。

那么只渲染新添加的一个/两个项目的最佳方法是什么。它就像在列表视图中附加两个新项目而不渲染整个列表一样。

Answer 1

此信息直接来自文档...

更复杂的多选示例演示了PureComponent用于perf优化和避免错误的用法。

通过绑定onPressItem处理程序，props将保持===并且PureComponent将防止浪费的重新呈现，除非实际id，selected或title props改变，即使在MyListItem中呈现的组件没有这样的优化。通过将extraData = {this.state}传递给FlatList，我们确保当state.selected更改时，FlatList本身将重新呈现。如果没有设置这个道具，FlatList就不会知道它需要重新渲染任何项目，因为它也是一个PureComponent，并且道具比较不会显示任何变化。

https://facebook.github.io/react-native/docs/flatlist.html

Answer 2

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}

  keyExtractor={(item, index) => item.id}
/>

在Listview中追加新项而不渲染整个列表 - React Native / React js

2 个答案: