如何用React JS无限滚动?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (251)

我正在研究如何使用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'));

寻找帮助...

提问于
用户回答回答于

基本上,滚动时,要决定哪些元素可见,然后重新渲染以仅显示那些元素,顶部和底部的单个间隔元素表示离屏元素。

你可以看看:

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

然后渲染功能将只显示范围内的行displayStart..displayEnd

用户回答回答于

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励