当VirtualZedList在React Native中更新时，对象的含义返回

Question

我正在为我的大学校园制作社交网络应用程序。我正在使用反应本机。现在，我正在使用redux维护我的应用程序状态，react-redux将状态与各种反应组件和redux-thunk绑定，以使异步API调用以获取和发布数据。我收到的任何数据，我都将其标准化，然后将其提交给Redux Store。我面临的一个主要问题是，每当我开始浏览应用程序的" 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内部支持。后者使用其ScrollView的onScroll事件来衡量性能指标。

主要指标，dt和prevDt测量onScroll事件对给定ScrollView发射多久。当onScroll事件启动并将其与最后一个存储的值进行比较时，通过存储当前的时间戳来测量两者。dt是当前的三角洲，prevDt是上一个事件火灾中测量的三角洲。

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

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

这可以测量React天然的JavaScript侧从天然侧接收事件的频率。这是一种间接但非常有效的方法来衡量您的清单是否花费很长时间才能在本地方面渲染。

contentLength是渲染内容的大小，通常将其直接链接到渲染上述内容所需的时间。如果您的内容是水平的，则是您渲染的内容的高度，对于垂直视图，它是宽度。

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

---

警告

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

• 当前渲染花费超过500ms（这意味着dt > 500）;
• 以前的渲染也花费了超过500ms（prevDt > 500）;
• 渲染内容是实际屏幕尺寸的五倍以上（contentLength > 5 * visibleLength）。

简单地说，当您的渲染时间长时间，您一口气呈现大量内容时会出现错误。对于良好的用户体验，可以假设推荐值因此低于显示的值。

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