react-native中flatlist的用法

Question

react-native中flatlist到底是怎么用的？看官网的例子怎么整的这么复杂？

我直接这样用：

<FlatList
  data={postListData}
  renderItem={this.renderItem}
  ItemSeparatorComponent={this.renderSeparator}
  onRefresh={this.onRefresh}
  refreshing={refreshing}
  onEndReached={this.onEndReached}
  onEndReachedThreshold={0.1}
/>

是跑起来了，但是有警告，并没有做任何的性能优化，按照官网那样应该可以进一步优化的，但是官网的例子搞的太复杂了，看了有点蒙。

有没有大神用浅显一点的方式告诉一下我是怎么用的？

Answer 1

我也是才学rn，flatlist有一个属性，keyExtractor，指定每个item的key

Answer 2

flatlist也是新出都没怎么使用过
官网说如果高度固定最好使用
getItemLayout={(data, index) => ( {length: 行高, offset: 行高 * index, index} )}
据说对性能影响比较大。

Answer 3

其一Item组件换纯函数, 否则比ListView还惨(数组长度有多少就惨多少倍)
其二看构建后正式的性能, 开发性能惨的一笔
getItemLayout在开发时影响很大, 在构建后感觉不到任何区别