95

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

助けを求めています...

4

3 に答える 3