React で無限スクロールを実装する方法を検討しています。私はreact-infinite-scrollに遭遇しましたが、ノードを DOM に追加するだけで削除しないため、非効率的であることがわかりました。DOM に一定数のノードを追加、削除、および維持する、React を使用した実績のあるソリューションはありますか。
これが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'));
助けを求めています...