Skip to content

React Native 中 initialNumToRender 和 windowSize 参数的区别

initialNumToRender

https://reactnative.dev/docs/flatlist#initialnumtorender

How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.

也就是FlatList渲染时就要渲染的item数量,这个参数设置成刚好够整个屏幕显示的数量即可,如果太大会导致初始化时卡白屏。

所以如果一个item占一屏,就设置成1。默认值为10。

windowSize

https://reactnative.dev/docs/virtualizedlist#windowsize

Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content.

这是继承自VirtualizedList的属性,代表着预加载总数。

如果设为3,则总共会保留当前页+上1页+下1页在内存中,设置这个值的目的是避免翻页时的白屏。

题外话

FlatList参数的设置对于其性能优化非常重要。用FlatList就是为了性能,所以必须仔细配置。

上次更新于: