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;
  // ...
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值