反应虚拟化中的无限滚动的去抖策略

Question

我正在尝试处理我的用户尝试滚动更快的情况或拖动滚动条来随机搜索列表的一部分。

我有一个约20000个项目的数据集，我通过无限滚动向用户公开。

• 我使用一个稀疏数组，根据通过loadMoreRows启动的数据提取来获取水分，isRowLoaded={this.onIsRowLoadedCheck}是我列表中的数据源。
• 当请求正在进行时，我在稀疏数组中保留带有loadingIndicators的点，并在请求正在进行时使用它来返回minimumBatchSize的true。
• 我使用100的threshold和50的

  <InfiniteLoader
      isRowLoaded={this.onIsRowLoadedCheck}
      loadMoreRows={this.onLoadMoreRows}
      rowCount={this.props.items.total}
      minimumBatchSize={100}
      threshold={50}
  >
      {({ onRowsRendered, registerChild }) => (
          <AutoSizer disableWidth>
              {({ height }) => (
                  <List
                      ref={listViewRef => {
                          this.listView = listViewRef;
                          return registerChild(listViewRef);
                      }}
                      height={height}
                      onRowsRendered={onRowsRendered}
                      rowCount={this.props.items.total}
                      noRowsRenderer={this.onNoRowsRenderer}
                      overscanRowCount={20}
                      deferredMeasurementCache={cache}
                      rowHeight={cache.rowHeight}
                      rowRenderer={this.renderRow}
                      width={256}
                  />
              )}
          </AutoSizer>
      )}
  </InfiniteLoader>

      onLoadMoreRows = (loadMoreRowsRange: LoadMoreRowsRange) => {
          const { startIndex, stopIndex } = loadMoreRowsRange;
          this.props.fetchItems(startIndex, stopIndex - startIndex + 1);
      };

我希望能够去掉服务器的调用，这样我就可以避免服务器超载，直到用户停止使用滚动条。

https://github.com/bvaughn/react-virtualized/issues/202

是否有一种常用于处理此方案的策略？

我看到之前在

onLoadMoreRows = (loadMoreRowsRange: LoadMoreRowsRange) => {
  clearTimeout(this.loadRowsTimeout)
  this.loadRowsTimeout = setTimeout(() => {
    const { startIndex, stopIndex } = loadMoreRowsRange;
    this.props.fetchItems(startIndex, stopIndex - startIndex + 1);
  }, 300)
};

讨论过类似的问题

Answer 1

我知道这有点晚了，但万一其他人需要它。您可以使用常规的去抖策略，例如（将300更改为您想要的任何ms值）：

const debouncedLoadMore = _.debounce(onLoadMoreRows, 300)

或者您可以使用库中的去抖功能，例如lodash：

qazxswpoi