我正在研究用 React 实现无限滚动的方法。我遇到过反应无限滚动 https://github.com/guillaumervls/react-infinite-scroll发现它效率低下,因为它只是将节点添加到 DOM 中,而没有删除它们。 React 是否有任何经过验证的解决方案可以在 DOM 中添加、删除和维护恒定数量的节点。
这里是jsfiddle http://jsfiddle.net/rajeevprasanna/d24HR/41/问题。
在这个问题中,我希望 DOM 中一次只包含 50 个元素。其他的应该在用户上下滚动时加载和删除。
我们开始使用 React 因为它的优化算法。现在我找不到这个问题的解决方案。我遇到过爱彼迎无限js http://airbnb.github.io/infinity/。但它是用Jquery实现的。要使用这个爱彼迎无限滚动,我必须放弃我不想做的反应优化。
我想添加滚动的示例代码是(这里我正在加载所有项目。我的目标是一次仅加载 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'));
寻求帮助...
基本上,当滚动时,您需要决定哪些元素可见,然后重新渲染以仅显示这些元素,并在顶部和底部使用单个间隔元素来表示屏幕外元素。
Vjeux https://github.com/vjeux在这里做了一个小提琴,你可以看看:jsfiddle 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
.
您也可能对。。。有兴趣ReactJS:建模双向无限滚动 https://stackoverflow.com/questions/20870448/reactjs-modeling-bi-directional-infinite-scrolling.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)