什么是maxToRenderPerBatch
maxToRenderPerBatch是FlatList组件中的一个可选参数,它可以控制FlatList组件在每次渲染时最多渲染多少项。默认情况下,maxToRenderPerBatch的值为10,也就是每次渲染时最多渲染10项。
为什么使用maxToRenderPerBatch
根据React Native的文档,FlatList组件会在每次渲染时对其视图进行批处理,并且每次批处理的大小是固定的,默认情况下为10项。设置maxToRenderPerBatch参数可以让我们更灵活地控制FlatList组件的渲染,这样就可以大幅提升FlatList组件的性能。
通俗点讲就是:设置更大的数字意味着滚动时视觉空白区域更少,但是每批次的项目更多意味着更长的 JavaScript 执行时间可能会阻塞其他事件处理,从而损害响应能力。
底层原理
maxToRenderPerBatch的底层原理是采用一种称为“分批渲染”的技术,其主要原理是将渲染任务分割成若干小块,每次渲染指定小块,从而节省渲染时间。maxToRenderPerBatch参数设置每次渲染的列表项数量,从而实现分批渲染的目的。
使用注意事项
- maxToRenderPerBatch的参数值必须是一个有效的正整数,否则可能导致渲染出错。
- maxToRenderPerBatch参数设置得太小,会导致频繁渲染,耗费大量CPU资源,反而会导致性能降低。
避免在实际使用中出现错误的五个代码例子
-
不要将maxToRenderPerBatch参数设置为负数或非数字型的值:
<FlatList
maxToRenderPerBatch={-1}
...
/>
-
不要将maxToRenderPerBatch参数设置为0:
<FlatList
maxToRenderPerBatch={0}
...
/>
-
不要将maxToRenderPerBatch参数设置为一个很小的数字,比如1:
<FlatList
maxToRenderPerBatch={1}
...
/>
-
不要将maxToRenderPerBatch参数设置为一个很大的数字,比如大于总列表项数:
<FlatList
maxToRenderPerBatch={list.length+1}
...
/>
使用建议
如果列表中的 2 个项目覆盖 100% 的屏幕高度,则将此属性设置为 3 到 5 左右。如果列表中的 5 个项目覆盖 100% 的屏幕高度,则将 maxToRenderPerBatch 设置为 8 左右。
此逻辑将确保滚动时始终呈现新的列表项,同时还通过仅呈现我们实际需要的项目数来节省资源。