2017-03-22 10 views
0

私は優れたパフォーマンスを発揮しています。これを行う方法の1つは、ユーザーが最初に負荷のデータをすべて表示しないときにデータを読み込むことです。データレンダリングを反応で調整する

Reactでこれを行う最良の方法は何ですか?

私は現在、データの配列を持っており、使用するデバイスによっては、一度に2〜4レコードしか表示されません。これを行うための

私の当初の計画ではなかった関数を呼び出すことだった:

incrementalLoad(data, item) { for(let i in data) { setTimeout(() => { //load 8 records }, 1000) } 

をしかし、私は、イベントループを思い出し、スタックの管理はここで問題です。あなたはどんなソリューションを使っていますか?私は正しい方向にいますか?

+0

スロットルデータの読み込みはどういう意味ですか?機内でのAJAXコールの回数を制限することを意味しますか?または、データがロードされたときに反応する回数を調整できますか? –

+0

@AndyRay私の最初の本能は、新しいデータでリストを更新するようにコンポーネントの状態を更新して、1つのajax呼び出しに固執してネットワーク需要を制限できるようにすることです。だから私はデータレンダリングのタイトルを変更するつもりです。ありがとう – Sequential

+0

@AndyRayああ、それはアイデアをもたらす、私は2つの州を持つことができます。すべてのデータのコンポーネント内の1つの状態と、現在表示されているすべてのデータの1つの状態。そして、それをレンダリングするたびに、 "すべてのデータ"状態から10個の項目を追加して現在の状態を追加するsetTimeoute関数があります。しかし、メモリ割り当てでbigO(n^2)のように見えます... – Sequential

答えて

1

あなたは仮想リストを探していると思います。基本的に、レコードの束はメモリにロードされていますが、画面上に表示されているものだけをレンダリングします。スクロールすると、アイテムは必要に応じてDOMに追加/削除されます。

反応仮想化ライブラリ(https://github.com/bvaughn/react-virtualized)は、この種の動作のための優れた実装を備えています。 https://bvaughn.github.io/react-virtualized/#/components/List

+0

これを実装して明日に確認します。ポイント上の音。 – Sequential

+0

素晴らしいツール、ありがとう – Sequential

関連する問題