Значение объекта, возвращаемого, когда VirtualzedList медленно обновляется в React Native

Краткий обзор

• dt — это время между двумя последними внутренними onScroll событиями, которое является косвенным измерением вашего времени рендеринга;
• prevDt — то же измерение для одного цикла заранее;
• contentLength — это основной размер (ширина или высота) отображаемого контента.

Это косвенные, но хорошие эмпирические измерения того, насколько разумно урезана ваша логика рендеринга. Для более глубокого понимания см. ниже.

FlatList внутренности

FlatList React Native внутренне поддерживается VirtualizedList. Последний использует событие onScroll своего ScrollView для измерения показателей производительности.

Основные показатели, dt и prevDt, измеряют, как часто событие onScroll срабатывает для данного ScrollView. Оба измеряются путем сохранения текущей метки времени при возникновении события onScroll и сравнения ее с последним сохраненным значением. dt — текущая дельта, prevDt — дельта, измеренная в предыдущем пожаре.

В упрощенном виде это взаимодействие показано ниже, вы можете просмотреть полный код сюда.

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

Это измеряет, как часто сторона Javascript React Native получает событие от нативной стороны. Это косвенный, но очень эффективный способ измерить, потребовалось ли много времени для отображения вашего списка на нативной стороне.

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() и т. д.).