ReactJsレイジーローダー

Question

ReactJsの新機能です。

ページをスクロールダウンしているとき、私は私が実際に、これはそれがすべてのデータをロード罰金が、最初の時間を働いている（https://jasonslyvia.github.io/react-lazyload/examples/#/normal?_k=rz3oyn）

を使用してい 、私のアプリケーションで怠惰なローダーを必要としています。

ページをスクロールダウンするときに、apiを呼び出してデータを設定したいと考えています。

ありがとうございます。

Answer 1

ほとんどの場合、無限のスクロール機能が必要です。非同期データの読み込みには、Reactのいくつかの良いオプションがあります：

1）高性能が必要な場合（サーバからの多くの結果）、react-infiniteを試すことができます。ドキュメントが言うように：

レンダリングすることで、これを無限解きを反応させるのが唯一のDOMは、ユーザー が見ることができるか、すぐに見るかもしれないことをノード。

2）別の簡単なオプションは、次のようになります。react-infinite-scroller

一般的な原理は、これらのライブラリを動作させるためには、モジュールが、要求時や待機することを作るためにするときお知らせします彼らの小道具を渡すことです。

<InfiniteScroll 
    pageStart={0} 
    loadMore={loadFunc} 
    hasMore={true || false} 
    loader={<div className="loader">Loading ...</div>} 
> 
    {items} // <-- This is the content you want to load 
</InfiniteScroll> 

loadFuncサーバーへのAPI呼び出しを行いますし、それが正常に解決されるまで、falseにhasMoreを設定します。