PROSAGA码农传奇-ECN-当RedzedList在React Native中更新缓慢时返回的对象的含义

<div class =“post-text”itemprop =“text”>
  
    React Native's
    <a href="https://facebook.github.io/react-native/docs/flatlist" rel="nofollow noreferrer">
       <code>
 FlatList
 </code>
    </A>
     由内部支持
    <a href="https://facebook.github.io/react-native/docs/virtualizedlist" rel="nofollow noreferrer">
       <code>
 VirtualizedList
 </code>
    </A>
    。后者使用了
    <a href="https://facebook.github.io/react-native/docs/scrollview#onscroll" rel="nofollow noreferrer">
       <code>
 onScroll
 </code>
    </A>
     它的事件
    <a href="https://facebook.github.io/react-native/docs/scrollview" rel="nofollow noreferrer">
       <code>
 ScrollView
 </code>
    </A>
     衡量绩效指标。
  
  
    主要指标，
     <code>
 dt
 </code>
     和
     <code>
 prevDt
 </code>
     测量频率
     <code>
 onScroll
 </code>
     事件发生了火灾
     <code>
 ScrollView
 </code>
    。两者都是通过存储当前时间戳来测量的
     <code>
 onScroll
 </code>
     触发事件并将其与上次存储的值进行比较。
     <code>
 dt
 </code>
     是目前的三角洲，
     <code>
 prevDt
 </code>
     是在前一次事件火灾中测量的delta。
  
  
    以简化的方式，此交互如下所示，您可以查看完整代码
    <a href="https://github.com/facebook/react-native/blob/master/Libraries/Lists/VirtualizedList.js#L1310" rel="nofollow noreferrer">
      在这里
    </A>
    。
  
   <pre>
 <code>
 onScroll(event) {
 const timestamp = event.timeStamp;
 const dt = timestamp - this.previousTimestamp;
 // ...
 this.previousTimestamp = timestamp;
}

</code>
 </pre>
  
    这可以衡量React Native的Javascript端从本机端接收事件的频率。这是一种间接但非常有效的方法来衡量您的列表是否需要很长时间才能在本机上进行渲染。
  
  
     <code>
 contentLength
 </code>
     是呈现内容的大小，通常直接与呈现所述内容所花费的时间相关联。如果您的内容是水平的，那么它是您渲染内容的高度，对于垂直视图，它是宽度。
  
   <pre>
 <code>
 onScroll(event) {
 // ...
 const contentLength = event.nativeEvent.contentSize.height;
 const visibleLength = event.nativeEvent.layoutMeasurement.height;
 // ...
}

</code>
 </pre>
  
    所以回顾一下：
  
  <UL>
    <LI>
       <code>
 dt
 </code>
       是最后两次之间的时间
       <code>
 onScroll
 </code>
       事件触发，它是渲染时间的间接度量。
    </LI>
    <LI>
       <code>
 prevDt
 </code>
       预先测量一个周期的测量值。
    </LI>
    <LI>
       <code>
 contentLength
 </code>
       是渲染内容的主要尺寸（宽度或高度）
    </LI>
  </UL>
  <HR />
  
    满足以下所有条件时抛出警告（请参阅
    <a href="https://github.com/facebook/react-native/blob/master/Libraries/Lists/VirtualizedList.js#L1345" rel="nofollow noreferrer">
      原始代码
    </A>
    ）：
  
  <UL>
    <LI>
      当前渲染耗时超过500毫秒（这意味着
       <code>
 dt > 500
 </code>
      ）
    </LI>
    <LI>
      之前的渲染也耗时超过500毫秒（
       <code>
 prevDt > 500
 </code>
      ）
    </LI>
    <LI>
      渲染内容比实际屏幕尺寸大五倍以上（
       <code>
 contentLength > 5 * visibleLength
 </code>
      ）
    </LI>
  </UL>
  
    简而言之，当您的渲染时间很长并且您一次渲染大量内容时，会抛出错误。为了获得良好的用户体验，可以假设推荐值低于显示的值。
  
  
    如何减少这些问题超出了这个问题的范围，但抛出的错误为您提供了许多良好的起点（
    <a href="https://reactjs.org/docs/react-api.html#reactpurecomponent" rel="nofollow noreferrer">
       <code>
 React.PureComponent
 </code>
    </A>
    ，
    <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate" rel="nofollow noreferrer">
       <code>
 shouldComponentUpdate()
 </code>
    </A>
     等等）。
  
</DIV>