React Native’s
FlatList
由内部支持
VirtualizedList
。后者使用了
onScroll
它的事件
ScrollView
衡量绩效指标。
主要指标，
dt
和
prevDt
测量频率
onScroll
事件发生了火灾
ScrollView
。两者都是通过存储当前时间戳来测量的
onScroll
触发事件并将其与上次存储的值进行比较。
dt
是目前的三角洲，
prevDt
是在前一次事件火灾中测量的delta。
以简化的方式，此交互如下所示，您可以查看完整代码
在这里
。
onScroll(event) {
const timestamp = event.timeStamp;
const dt = timestamp - this.previousTimestamp;
// …
this.previousTimestamp = timestamp;
}</code>
这可以衡量React Native的Javascript端从本机端接收事件的频率。这是一种间接但非常有效的方法来衡量您的列表是否需要很长时间才能在本机上进行渲染。
contentLength
是呈现内容的大小，通常直接与呈现所述内容所花费的时间相关联。如果您的内容是水平的，那么它是您渲染内容的高度，对于垂直视图，它是宽度。
onScroll(event) {
// …
const contentLength = event.nativeEvent.contentSize.height;
const visibleLength = event.nativeEvent.layoutMeasurement.height;
// …
}</code>
所以回顾一下：
dt
是最后两次之间的时间
onScroll
事件触发，它是渲染时间的间接度量。
prevDt
预先测量一个周期的测量值。
contentLength
是渲染内容的主要尺寸（宽度或高度）
满足以下所有条件时抛出警告（请参阅
原始代码
）：
当前渲染耗时超过500毫秒（这意味着
dt > 500
）
之前的渲染也耗时超过500毫秒（
prevDt > 500
）
渲染内容比实际屏幕尺寸大五倍以上（
contentLength > 5 * visibleLength
）
简而言之，当您的渲染时间很长并且您一次渲染大量内容时，会抛出错误。为了获得良好的用户体验，可以假设推荐值低于显示的值。
如何减少这些问题超出了这个问题的范围，但抛出的错误为您提供了许多良好的起点（
React.PureComponent
，
shouldComponentUpdate()
等等）。