VirtualizedList: You have a large list that is slow to update - make sure your renderItem function r

报错如下：

React Native的FlatList 底层是VirtualizedList.这个鸡儿使用ScrollView的onScroll事件来进行渲染效率的统计。

主要的指标  dt 和 preDt 指出了您触发这个onScroll事件的频率。当onScroll事件触发的时候，我们存储其相应的时间戳，通过对时间戳的比较来得出结论。dt指代当前。prevDt指代前一个事件触发的时间点。

 

我们来看一个简单的示例，

onScroll(event) {
  const timestamp = event.timeStamp;
  const dt = timestamp - this.previousTimestamp;
  // ...
  this.previousTimestamp = timestamp;
}

这个指标显示了React Native从原生端接收的事件的频率。这是一个间接的但是非常有效的方法去衡量你的列表是否需要花费很长的时间来渲染数据。

contentLength 是被渲染内容的个数。这个通常直接与你渲染内容所花费的时间关联。如果你的内容是水平布局，它就是你渲染内容的高度，如果是垂直布局，那么它就指代宽度。

onScroll(event) {
  // ...
  const contentLength = event.nativeEvent.contentSize.height;
  const visibleLength = event.nativeEvent.layoutMeasurement.height;
  // ...
}

概括的说：

     dt:就是最近两个onScroll事件触发的间隔时间，这个间接的限定了你的渲染时间。

    preDt:  在一个循环周期内，两个onScroll事件触发的间隔时间。

    contentLength:   你渲染内容的尺度范围。

 

当满足下面的条件的时候，这个警告就会被抛出来

    1. 当前渲染所花费的时间超过了500ms，也就是(dt>500)

    2. 之前的渲染时间也花费了超过500ms的时间 （prevDt>500）

    3.  渲染的内容的大小超过实际屏幕尺寸大小的五倍（contentLength > 5*visibleLength）

简单的说就是当你一次性渲染太多的内容而导致你渲染时间很长的时候这个警告就会被抛出。为了达到更好的用户体验，我们可以通过使用React.PureComponent 或者设置shouldComponentUpdate()方法来优化你的应用。