Как я могу отлаживать InfiniteScroll/Grid извлечения виджета?

Question

У меня есть комбинация React Virtualized InfiniteList/Grid, следуя базовому шаблону из документации (https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#infiniteloader-and-grid).

Он отлично работает, за исключением двух вещей:

• Если я прокручиваю слишком быстро, вместо того, чтобы ждать вещей, чтобы догнать, он сбрасывает прокрутки в верхней части сетки

• комбо только получает первые результаты N (например, 125) ... хотя у меня есть 859 результатов (и даже если я предусмотрел 859 как rowCount опоры)

  • Это особенно стра nge, потому что он получает с шагом 25, поэтому это означает, что все работает отлично в первые 5 раз, а затем необъяснимо терпит неудачу на 6-м.

Я пробовал все, что могу, чтобы выяснить, что происходит, и даже когда я заполнить Реагировать виртуализированное код с console.log и debugger заявления я до сих пор не могу понять, почему он останавливается на 125 результатов (или почему быстрая справка прокрутки).

Может ли кто-нибудь более знакомый с React Virtualized указать мне место в коде, где он решает, следует ли делать выборку или останавливать (и, возможно, сбросить индекс начала до 0)? Я могу сказать, что задействованы и и Grid onSectionRendered, но я до сих пор не могу понять, где прекращается обработка значений, и начинается фактическая логика «решайте, продолжать ли».

Answer 1

Как указано в его комментарии, компонент InfinititeLoader (https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.js) является частично ответственным. Всякий раз, когда строки отображаются, метод _loadUnloadedRanges вызывается из scanForUnloadedRanges, и он обрабатывает загруженные диапазоны, найденные scanForUnloadedRanges.

Однако это только часть уравнения. Параметры, которые передаются в onRowsRendered, взяты из Grid. Grid_updateScrollTopForScrollToRow метод вызывается как прокрутке, и этот метод имеет следующую строку:

const targetIndex = Math.max(0, Math.min(rowCount - 1, scrollToRow)) 

Это targetIndex будет в конечном счете, влияет на какие строки загружаются, и, как вы можете видеть, что это зависит от rowCount, который передается в первоначально.

Это то, что вызвало проблемы для меня. Я начал с комбинации InfiniteLoader + List, и в этой установке «строка» означает то же самое для обоих компонентов. Однако затем я переключился на комбинацию + Grid, а на Grid «строка» - это массив из InfiniteLoader строк. Другими словами, «строка» Grid представляет собой ряд ячеек, но «строка» InfiniteLoader является ячейкой.

Мой метод расчета rowCount был изменен, чтобы использовать Grid определение «строки», но так как он передается в InfinniteLoader я должен использовать определение InfiniteLoader «s о„строке“вместо этого. Другими словами, я должен был вернуть только numItems, а не numItems/columnCount.

Все это можно было бы легко избежать, если React Virtualized использовал ссылку «items» для InfiniteLoader вместо использования имени, которое также используется (с двумя разными значениями) двумя другими компонентами React Virtualized ... но по крайней мере сейчас У меня есть лучшее понимание того, как работают эти компоненты.