タグ付けされた質問 「infinite-scroll」

このアプリケーションでは、無限スクロールを使用して、異種のアイテムの大きなリストをナビゲートします。いくつかのしわがあります。 ユーザーが10,000アイテムのリストを持ち、3k以上をスクロールする必要があるのはよくあることです。 これらは豊富なアイテムであるため、ブラウザのパフォーマンスが受け入れられなくなるまでに、DOMに数百しか存在できません。 アイテムの高さはさまざまです。 アイテムには画像が含まれている場合があり、ユーザーは特定の日付にジャンプできます。これは、ビューポートの上に画像をロードする必要があるリストのポイントにユーザーがジャンプできるため、ロードするとコンテンツが押し下げられるため、これはトリッキーです。これを処理できない場合、ユーザーは日付にジャンプしても、以前の日付にシフトする可能性があります。 既知の不完全なソリューション： （react-infinite-scroll）-これは、単純な「下にヒットしたときにさらにロードする」コンポーネントです。DOMを排除することはないため、何千ものアイテムで死んでしまいます。 （Reactを使用したスクロール位置）- 両方ではなく、上部に挿入するか下部に挿入するときに、スクロール位置を保存および復元する方法を示します。 完全なソリューションのコードを探しているのではありません（それはすばらしいでしょう）。代わりに、この状況をモデル化するための「Reactの方法」を探しています。スクロール位置の状態ですか？リストで自分の位置を保持するには、どの状態を追跡する必要がありますか？レンダリングされたものの下部または上部の近くでスクロールしたときに新しいレンダリングをトリガーするには、どの状態を維持する必要がありますか？

114 javascript  html  infinite-scroll  reactjs 

Reactで無限スクロールを実装する方法を探しています。私はreact-infinite-scrollに出くわしましたが、それはDOMにノードを追加するだけで、それらを削除しないため、非効率的であることがわかりました。DOMに一定数のノードを追加、削除、維持するReactの実証済みのソリューションはありますか？ これがjsfiddleの問題です。この問題では、一度にDOMに50個の要素のみを含めたいと思います。他のものは、ユーザーが上下にスクロールするときにロードおよび削除する必要があります。最適化アルゴリズムのため、Reactの使用を開始しました。今、私はこの問題の解決策を見つけることができませんでした。私はairbnbinfinitejsに出くわしました。ただし、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>) } …

89 javascript  html  infinite-scroll  reactjs