Javascript ReactJs-复制组件而不延迟网页

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

---

如果用户输入30000作为重复编号，网页将冻结20-25秒。因为我将同一个组件循环30000次并附加它。有没有办法缩短冻结时间或停止冻结？我尝试了

React.lazy

，但我发现

对象不能是子元素

错误。

我认为您需要虚拟滚动，虚拟滚动只在DOM上保留可见元素，请查看下面的链接

---

你也可以考虑更轻的重量，反应同一作者的窗口！

---

非常感谢您。你的回答出卖了我与@user3597009之间的一些问题。我把他的答案标记为正确答案，因为这是我得到的第一个答案。当然不用担心！：）