在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()} 

当然，这是如果你不想使用方便的库。