Question

导航到包含大量UI元素列表的页面时，UI会在显示列表之前冻结几秒钟。我猜这是因为浏览器试图用UI元素列表重新绘制整个DOM，这需要花费一些时间来反过来冻结UI一段时间。

我构建了这个webpackbin来证明这种情况。单击list链接将转到包含大量简单方形div的列表页面。在最终显示列表之前，UI会冻结几秒钟。

有什么方法吗？

Answer 1

是的，一次插入177147个项目确实会滞后于UI。您想要做的是 lazily 加载列表，因此当您向下滚动时，会插入项目。

以下是两个可以帮助您的图书馆：

Answer 2

列表组件是纯组件（无状态）吗？您可以使用此方法尝试更有效的路线： 45% Faster React

基本上不是像这样渲染你的组件：

<Component/>

你会像这样渲染它：

{Component()}

当然，如果您不想使用方便的库，那就是这样。