我正在寻找使用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。
滚动时执行
然后render函数将只显示range中的行
displayStart..displayEnd
。您可能也对ReactJS:双向双向无限滚动建模感兴趣。