使用React JS无限滚动

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在寻找使用React实现无限滚动的方法。我遇到了react-infinite-

scroll，发现它效率低下，因为它只是将节点添加到DOM中，而不会删除它们。React是否有经过验证的解决方案，可以添加，删除和维护DOM中恒定数量的节点。

这是jsfiddle问题。在这个问题中，我想一次仅在DOM中包含50个元素。当用户上下滚动时，应加载和删除其他文件。由于它的优化算法，我们已经开始使用React。现在我找不到解决此问题的方法。我遇到过airbnb

Infinite

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

寻找帮助…

回答：

基本上，在滚动时，您想确定哪些元素是可见的，然后重新渲染以仅显示那些元素，顶部和底部的单个spacer元素代表屏幕外的元素。

Vjeux在这里做了一个小提琴，您可以看一下：jsfiddle。

滚动时执行

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函数将只显示range中的行displayStart..displayEnd。

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

以上是 使用React JS无限滚动 的全部内容， 来源链接： utcz.com/qa/434369.html

回到顶部