FlatList 组件性能优化理解

最新推荐文章于 2024-09-11 07:18:43 发布

aijason

最新推荐文章于 2024-09-11 07:18:43 发布

阅读量5.6k

点赞数 2

分类专栏： react native

本文链接：https://blog.youkuaiyun.com/u010379595/article/details/82385629

版权

本文探讨了FlatList组件的性能优势，解释了它如何通过仅渲染可见内容提高效率。文章总结了三项关键优化技巧：1) 使用getItemLayout预先计算布局以减少渲染；2) 谨慎应用removeClippedSubviews以优化滑动性能；3) 结合PureComponent避免不必要的重渲染，并通过extraData确保状态更新。此外，还强调了keyExtractor的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FlatList 之所以节约内存、渲染快，是因为它只将用户看到的(和即将看到的)部分真正渲染出来了。而用户看不到的地方，渲染的只是空白元素。渲染空白元素相比渲染真正的列表元素需要内存和计算量会大大减少，这就是性能好的原因。

优化FlatList列表性能方法我总结为三种：

1、getItemLayout

可选优化项。但是实际测试中，如果不做该项优化，性能会差很多。所以强烈建议做此项优化！
如果不做该项优化，每个列表都需要事先渲染一次，动态地取得其渲染尺寸，然后再真正地渲染到页面中。

如果预先知道列表中的每一项的高度(ITEM_HEIGHT)和其在父组件中的偏移量(offset)和位置(index)，就能减少一次渲染。这是很关键的性能优化点。

      /*
      * length: 是被渲染 item 的高度。
      * offset(偏移量)
      * 注意如果你指定了ItemSeparatorComponent，请把分隔线的尺寸也考虑到 offset 的计算之中。
      */     
     _getItemLayout = (data, index) => (
          {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
        )

      <FlatList
        data = {this.state.listData}
        renderItem={this.renderItem}
        getItemLayout={this._getItemLayout}
      /><

最低0.47元/天解锁文章