React JSでの無限スクロール

Question

Reactで無限スクロールを実装する方法を見ています。私はreact-infinite-scrollに出くわし、DOMにノードを追加して削除しないので、効率が悪いことがわかりました。 Reactには、DOM内に一定数のノードを追加、削除、および維持する実績のあるソリューションがありますか？

ここにはjsfiddleの問題があります。 この問題では、一度にDOMに50個の要素しか持たないことを望みます。ユーザーが上下にスクロールすると、他のものが読み込まれ、削除されます。 Reactは最適化アルゴリズムのために使用し始めました。今私はこの問題の解決策を見つけることができませんでした。私はairbnb infinite jsを訪れました。しかし、それはJqueryで実装されています。このairbnb無限のスクロールを使用するには、私はしたくないリアクションの最適化を緩めなければなりません。私は、スクロールを追加したい

サンプルコードは（ここで私は、すべての項目をロードしています。私の目標は、一度に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')); 

...

Answer 1

基本的にはスクロールするときに、どの要素が表示されているのかを判断し、それらの要素だけを表示するように再レンダリングし、画面上の要素を表す上下の単一のスペーサー要素を使用します。それは

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で行のみが表示されますスクロールしたら

http://jsfiddle.net/vjeux/KbWJ2/9/

：

Vjeuxあなたが見ることができ、ここでフィドルを作りました。

また、ReactJS: Modeling Bi-Directional Infinite Scrollingに興味があります。

Answer 2

チェックアウト私たちのリアクト無限Libary：

https://github.com/seatgeek/react-infinite

を更新2016年12月

私は実際に最近、私のプロジェクトの多くにreact-virtualizedを使用して、それが大部分をカバーすることを発見してきましたユースケースの方がはるかに優れています。両方の図書館はいいです、あなたが探しているものに正確に依存しています。例えば、react-virtualizedは、CellMeasurerと呼ばれるHOC経由の可変高さJIT測定をサポートします（例：https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer）。