使用React JS无限滚动

Question

我正在寻找使用React实现无限滚动的方法.我遇到了react-infinite-scroll并发现它效率低,因为它只是向DOM添加节点而不删除它们.有没有经过验证的React解决方案,它将在DOM中添加,删除和维护恒定数量的节点.

这是jsfiddle问题.在这个问题中,我希望一次只有DOM中的50个元素.当用户向上和向下滚动时,应加载和删除其他内容.我们已经开始使用React,因为它的优化算法.现在我找不到解决这个问题的方法.我遇到过airbnb无限的js.但是它是用Jquery实现的.要使用这个airbnb无限滚动,我必须松开我不想做的React优化.

示例代码我想添加滚动是(这里我正在加载所有项目.我的目标是一次只加载50个项目)

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return (<li>Hello {this.props.name}</li>);
    }
});

var HelloList = React.createClass({ 
     getInitialState: function() {                            
         var numbers =  [];
         for(var i=1;i<10000;i++){
             numbers.push(i);
         }
         return {data:numbers};
     },

    render: function(){
       var response =  this.state.data.map(function(contact){          
          return (<Hello name="World"></Hello>);
        });

        return (<ul>{response}</ul>)
    }
});

React.renderComponent(<HelloList/>, document.getElementById('content'));

寻求帮助......

Answer 1

基本上在滚动时,您想要确定哪些元素是可见的,然后重新渲染以仅显示那些元素,在顶部和底部使用单个间隔元素来表示屏幕外元素.

Vjeux在这里做了一个小提琴你可以看一下:

http://jsfiddle.net/vjeux/KbWJ2/9/

滚动时执行

scrollState: function(scroll) {
    var visibleStart = Math.floor(scroll / this.state.recordHeight);
    var visibleEnd = Math.min(visibleStart + this.state.recordsPerBody, this.state.total - 1);

    var displayStart = Math.max(0, Math.floor(scroll / this.state.recordHeight) - this.state.recordsPerBody * 1.5);
    var displayEnd = Math.min(displayStart + 4 * this.state.recordsPerBody, this.state.total - 1);

    this.setState({
        visibleStart: visibleStart,
        visibleEnd: visibleEnd,
        displayStart: displayStart,
        displayEnd: displayEnd,
        scroll: scroll
    });
},

然后render函数将只显示范围中的行displayStart..displayEnd.

您可能也对ReactJS:双向无限滚动建模感兴趣.

Answer 2

看看我们的React Infinite Library:

https://github.com/seatgeek/react-infinite

2016年12月更新

我最近在很多项目中使用了react-virtualized,发现它在很多情况下覆盖了大多数用例.两个库都很好,它取决于你正在寻找什么.例如,react-virtualized支持通过HOC测量的可变高度JIT CellMeasurer,例如https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer.

2018年11月更新

来自react-virtualized的许多课程已被移植到同一作者的更小,更快,更高效的反应窗库中.