reactjs 如何在使用"平面列表“组件时提高填充率?

jfewjypa  于 2023-03-08  发布在  React
关注(0)|答案(4)|浏览(160)

在RN doc Flatlist单元中,有一个描述:
为了限制内存并实现平滑滚动,内容在屏幕外异步呈现。这意味着滚动速度可能比填充速度快,并暂时看到空白内容。这是一个权衡,可以调整以适应每个应用程序的需求,我们正在幕后改进它。
我面临的问题,有时空白内容显示。如何提高填充率时,使用Flatlist组件?

58wvjzkj

58wvjzkj1#

我不知道你是否解决了这个问题,但是我写了关于FlatList性能的this article,你应该看看!
在你的问题中,你问到了提高“填充率”。严格地说,要提高填充率,你需要调整两个 prop :updateCellsBatchingPeriodmaxToRenderPerBatch
updateCellsBatchingPeriod是以毫秒为单位的间隔,默认值为50。
maxToRenderPerBatch是每次updateCellsBatchingPeriod迭代时呈现的项数。默认值为10。
问题是,你可以设置一个较低的maxToRenderPerBatch和一个较低的updateCellsBatchingPeriod,以在一个较小的间隔内渲染较少的项目,或者设置一个较大的maxToRenderPerBatch和一个较大的updateCellsBatchingPeriod,以在一个较大的间隔内渲染较多的项目,哪一个最适合你。
但是天下没有免费的午餐。例如,每秒的操作数越多,就意味着对触摸事件的响应越慢。所以我建议您看一看我的文章,了解更多关于如何增强FlatList的信息。

ejk8hzay

ejk8hzay2#

默认值为使用maxToRenderPerBatch={10} 10。请查看虚拟化列表

pu3pd22g

pu3pd22g3#

这可能有助于使用这些 prop 来调整:

maxToRenderPerBatch={1000}
windowSize={60}           
updateCellsBatchingPeriod={50}   
initialNumToRender={50}
ubbxdtey

ubbxdtey4#

当使用Flatlist组分时可以提高填充率:

  • 尝试在渲染项目中使用更少的条件
  • 使用每个批次的最大渲染目标、更新单元格批处理周期和删除剪切子视图={true}

相关问题