用React JS无限滚动
我正在寻找方法来实现与React无限滚动。 我遇到了react-infinite-scroll ，发现它效率不高，因为它只是向DOM添加节点，并且不删除它们。 React是否有经过validation的解决scheme，可以在DOM中添加，移除和维护不变的节点数量。
这是jsfiddle问题。 在这个问题中，我想在DOM中只有50个元素。 其他人应该加载和删除作为用户上下滚动。 我们已经开始使用React，因为它的优化algorithm。 现在我找不到解决这个问题的方法。 我遇到了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')); 寻找帮助…
基本上滚动时，你要决定哪些元素是可见的，然后重新显示只有这些元素，顶部和底部的单个spacer元素来表示离屏元素。
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 }); },
然后渲染函数将只显示范围displayStart..displayEnd的行。
您可能也有兴趣在ReactJS：build模双向无限滚动 。
看看我们的React Infinite Libary：
https://github.com/seatgeek/react-infinite
2016年12月更新
实际上，我最近在很多项目中使用了反应式虚拟化技术 ，并且发现它大部分的用例都比较好。 两个库都很好，这取决于你在找什么。 例如，react-virtualized支持通过名为CellMeasurer的HOC进行variables高度JIT测量，例如https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer 。
