リアクションで大きなリストを作成するとUIが数秒間遅れます

Question

UI要素のリストが多いページに移動すると、リストが表示されるまでUIが数秒間フリーズします。私はブラウザがUI要素のリストを持つDOM全体を再描画しようとしていることが推測されています。UI要素のリストにはしばらくの間UIがフリーズしてしまいます。

この状況を示すwebpackbinを作成しました。 listリンクをクリックすると、多数の単純な四角形のdivを含むリストページに移動します。最後にリストを表示する前に、UIが数秒間フリーズします。

これを回避する手段はありますか？

Answer 1

はい、177147個のアイテムを一度に挿入するとUIが実際に遅くなります。あなたがしたいことは遅れてがリストをロードするので、スクロールすると項目が挿入されます。

https://github.com/onefinestay/react-lazy-render

https://www.npmjs.com/package/react-infinite-scroll

Answer 2

がリストコンポーネント純粋なコンポーネント（ステートレス）です。ここで

はあなたを助ける2つのライブラリはありますか？あなたは、このメソッドを使用して、より効率的なルートを試みることができる： 45% Faster React

基本的には、代わりにこのようなあなたのコンポーネントをレンダリングする：

<Component/> 

あなたはこのようにそれをレンダリングします：もちろん

{Component()} 

、これは、便利なライブラリを使いたくない場合です。