在React中構建大型列表時UI滯後幾秒

Question

當導航到包含大量UI元素的頁面時，界面在顯示列表之前凍結了幾秒鐘。我猜這是因爲瀏覽器嘗試重新繪製整個DOM的UI元素列表，這需要一段時間，這反過來凍結了一段時間的UI。

我已經構建了這個webpackbin，它演示了這種情況。點擊list鏈接可進入包含大量簡單方塊的列表頁面。在最終顯示列表之前，UI凍結了幾秒鐘。

有沒有辦法解決這個問題？

Answer 1

是的，一次插入177147個項目的確會落後於用戶界面。你想要做的是懶洋洋地加載列表，所以當你向下滾動時，項目被插入。

這裏有兩個庫，這將有助於你：

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

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

Answer 2

是List組件純組分（無狀態）？ 45% Faster React

基本上而不是渲染您的組件這樣的：你可以使用此方法嘗試更有效的途徑

<Component/> 

你會呈現這樣的：

{Component()} 

當然，這是如果你不想使用方便的庫。