进击ReactNative-FlatList源码解析_flatlist onlayout-CSDN博客

本文链接：https://blog.csdn.net/ssuchange/article/details/96355332

本文深入探讨了React Native中的FlatList组件，分析了其在数据不确定情况下的首屏展示策略，以及如何实现流畅滚动。通过预加载多屏数据、使用getItemLayout优化性能、利用InteractionManager进行延后计算等方式，FlatList实现了高性能的长列表渲染。此外，还揭示了FlatList的吸顶功能实现技巧，并提供了源码日志分析，帮助开发者更全面地理解其工作原理。

摘要由CSDN通过智能技术生成

FlatList的性能高在哪里?
☞阅读原文

考考你

问：在数据项高度不确定情况下，js侧不具备直接计算组件大小的能力，是怎么知道首屏展示几个数据项？
答：js侧首屏几个不是直接计算出来的，而是先通过设置的属性估算出几个数据项，同时设置数据项和列表的布局监听回调onLayout，回调中修正数据项个数（如果还有数据项并且屏幕还有空间，则继续添加数据项）。
问：FlatList只展示屏幕中的个数，那怎么还能快速滚动，Native底层对应的可是普通的滚动容器ScrollView？
答：FlatList中数据项个数不止屏幕中显示的个数，会有超出屏幕外的多屏数据项（通过windowSize属性设置）。假如实际数据项100，FlatList一屏能展示10个，此时FlatList中的个数可能是30个，如果你快速滑动，只能滑出30个就到底了，需要过一会才发现还能接着滑动。
问：FlatList中空白项和实际未显示的数据项个数对应么，空白项高度怎么计算？
答：空白项和实际未显示个数不对应，最多只有两个空白项（顶部空白项和底部空白项）。如果未显示数据项高度已经计算过（之前在界面显示过），则直接累加即可算出，如果位置，则通过估算（已知数据项高度的平均值）。
问：FlatList滑动起来一点都不卡，必要的计算还是有的，这是怎么做到的？
答：除少数情况下（用户滑动到的页面是空白），计算工作大部分在InteractionManager.runAfterInteractions（将一些耗时较长的工作安排到所有互动或动画完成之后再进行）执行。有效的避免了和用户交互抢占CPU，而且是用户交互停下来了才触发，避免了跟随用户动作频繁计算。不过弊端就是上面的少数情况下会卡顿（预设的缓冲用完了，只能强制在交互中同步计算）或者看起来像彩蛋（快速滑动还没有显示完所有数据就到底滑不动了、快速滑动下白屏）。
问：网上说FlatList的原理是“不在屏幕中的组件会被移除，通过空白替代”，和没说一样？
答：
1. 长列表最大的硬伤是随着列表不断滑动，数据项越来越多，内存越来越大，然后就OOM了。通过将屏幕外组件移除是解决该硬伤的核心思想（其实核心思想就这么几种，大家都能想到，困惑的其实是怎么做到的）。
2. FlatList首先会预缓冲很