在React Native中VirtualzedList更新缓慢时返回的对象的含义

Question

我正在为我的大学校园开发一个社交网络应用程序。我正在使用React Native。现在，我正在使用Redux维护我的应用程序状态，使用React-redux将该状态绑定到各种React组件，使用Redux-thunk进行异步API调用以获取和发布数据。我收到的任何数据，在将其提交到Redux存储之前都会对其进行规范化。我面临的一个主要问题是，每当我开始滚动应用的“ Feed”时，都会收到警告：

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object {
  "contentLength": 6298,
  "dt": 4840,
  "prevDt": 7619,
}

我想知道上面对象中的各种键值对实际上意味着什么。同样，这些值应大致等于什么才能获得良好的用户体验。

注意：我FlatList用来渲染提要的各个帖子。

Answer 1

简短概述

• dt是两次最后一次内部onScroll事件触发之间的时间，这是对渲染时间的间接度量；
• prevDt 预先在一个周期内进行相同的测量；
• contentLength 是渲染内容的主要尺寸（宽度或高度）。

这些是间接的，但很好的经验法则，用于衡量渲染逻辑的合理程度。有关更深入的见解，请参见下文。

FlatList 内部

React Native的FlatList内部支持VirtualizedList。后者使用onScroll事件ScrollView来衡量性能指标。

主要指标，dt并prevDt衡量onScroll给定事件触发的频率ScrollView。通过在onScroll事件触发时存储当前时间戳并将其与最后存储的值进行比较来测量这两者。dt是当前增量，prevDt是在前一次事件触发中测得的增量。

以简化的方式，此交互如下所示，您可以在此处查看完整的代码。

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

这可以衡量React Native的Javascript端从本地端接收事件的频率。这是一种间接但非常有效的方法，用于衡量您的列表是否需要很长时间才能在本机端呈现。

contentLength是渲染内容的大小，通常直接与渲染该内容所花费的时间直接相关。如果您的内容是水平的，则是渲染内容的高度；对于垂直视图，则是宽度。

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

警告

满足以下所有条件时，将抛出所描述的警告（请参阅原始代码）：

• 当前渲染时间超过500毫秒（这意味着dt > 500）；
• 以前的渲染也花费了500毫秒以上（prevDt > 500）；
• 并且呈现的内容是实际屏幕尺寸（contentLength > 5 * visibleLength）的五倍以上。

简而言之，当您的渲染时间很长，并且一次要渲染很多内容时，会引发错误。为了获得良好的用户体验，可以假定推荐值因此低于显示值。

如何减少这些问题不在此答案的范围内，但是引发的错误为您提供了许多不错的起点（React.PureComponent，shouldComponentUpdate()等）。