React App中的滚动性能

Question

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

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

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

在触摸移动网页时，如何使滚动效果良好并移动到预期的距离。

这里有一些相同的代码。

＆＃13;

＆＃13;

    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);
    }

＆＃13;

＆＃13;

＆＃13;

Answer 1

就我的代码而言，每次滚动事件都会调用fetchPaginateResult函数，这可能发生在每秒60次左右，而不仅仅是一次（当然，只要你到达航点）。您可以尝试自己修复此问题，也可以使用为您执行此操作的库，例如优秀的react-waypoint模块。

你偶然看过react-virtualized吗？它为您提供了非常有效的列表呈现，非常类似于移动操作系统上的本机ListView。当您有可能非常大的数据集时，这尤其有意义。

Answer 2

我假设你使用ListView来渲染产品列表。如果你只是通过ListView documentation，你会发现很多props来提高你的列表效率。

1. initialListSize
2. onChangeVisibleRows

但是，您必须自己编写优化。