[解決済み] React JSによる無限スクロール

質問

私はReactで無限スクロールを実装する方法を探しています。私は遭遇した react-infinite-scroll を見つけ、それはDOMにノードを追加するだけで、それらを削除しないので、非効率的であることがわかりました。DOMにノードを追加、削除し、一定の数を維持するReactの実証済みのソリューションはありますか。

以下は jsfiddle の問題です。 この問題では、一度に50個の要素だけをDOMに表示したいのですが、他の要素はユーザーが上下にスクロールするときに読み込まれ、削除される必要があります。 私たちは、その最適化アルゴリズムのために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'));

助けを求めて...

どのように解決するのですか？

基本的には、スクロールするときに、どの要素が表示されているかを判断し、それらの要素のみを表示するように再レンダリングし、画面外の要素を表すために上下に1つのスペーサー要素を置きたいとします。

Vjeux を作成しましたので、ご覧ください。 jsfiddle .

スクロールすると

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: 双方向の無限スクロールをモデル化する .