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

Question

Я работаю над созданием приложения для социальных сетей для моего университетского городка.Я использую React Native.Прямо сейчас я использую Redux для поддержания своего состояния приложения, React-redux для привязки состояния к различным компонентам React и redux-thunk для выполнения асинхронных вызовов API для получения и публикации данных.Любые данные, которые я получаю, я нормализую перед отправкой в ​​хранилище Redux.Одна из основных проблем, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я начинаю прокручивать «Канал» приложения, я получаю предупреждение:

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's 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;
}

Показывает, как часто сторона 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() и т. Д.).