ReactJs-复制组件而不滞后网页

Question

在我的应用中，我有一个这样的组件。在灰色框中，用户可以输入两个值。这里的绿色数字表示这两个值将重复多少次。

如果用户输入30000作为重复号码，则该网页将冻结20-25秒。因为我要遍历30000次相同的组件并将其附加。有什么解决方案可以减少冻结时间或停止冻结吗？我尝试了React.lazy，但遇到了Objects can't be child elements错误。

Answer 1

我认为您需要虚拟滚动，虚拟滚动仅在DOM上保留可见元素，请查看以下链接 https://github.com/bvaughn/react-virtualized

Answer 2

您还可以考虑来自同一作者的更轻巧的反应窗口！ https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized