javascript - React 应用程序中的滚动性能

Question

我使用 React 和 Redux 构建了一个应用程序，它从后端调用 api 并呈现项目列表。此列表上有无限滚动分页。它看起来像这样。

我正在使用此应用程序在 Android 应用程序 Web View 中打开，但这不是问题。问题是，当只有一个页面分页时，它在滚动时性能很好，但一旦到达页面底部并触发 api 调用事件以从后端获取下一页结果，我观察到非常糟糕的情况滚动时卡顿。不仅如此，滚动时页面移动的距离非常短，我必须移动手指两三次才能向上或向下滚动。

我尝试在 Web Worker 中运行 redux 功能，因为所有内容中的单个 UI 线程可能会导致问题。但是，即使在那之后，结果也并不令人满意。

当我在触摸时移动网页时，我该怎么做才能使滚动良好并移动到良好的预期距离。

这里有一些相同的代码。

    componentDidMount(){              
        if(this.showTabs(this.props.location.query.uri)){
            this.props.setCurrentDealListingType('online');
            this.fetchOnlineDeals();
        } else {            
            this.props.setCurrentDealListingType('deals');
            this.fetchDeals();
        }           
        
        var self = this;
        scrollHandler =  function (event) {
            if (document.body.scrollHeight ===
                document.body.scrollTop +        
                window.innerHeight) {
                self.fetchPaginatedResult();           
            }
        }

        document.addEventListener('scroll', scrollHandler);

    }
    
    componentWillUnmount(){
        document.removeEventListener('scroll', scrollHandler);
    }

Answer 1

据我从您的代码中可以看到，函数 fetchPaginateResult 会为每个滚动事件调用，这可能每秒发生大约 60 次，而不仅仅是一次(当然，一旦您到达路径点)。您可以尝试自己修复此问题，也可以使用为您执行此操作的库，例如优秀的 react-waypoint模块。

你看过react-virtualized吗？偶然地？它为您提供非常高效的列表渲染，与移动操作系统上的 native ListView 非常相似。当您可能拥有非常大的数据集时，这尤其有意义。