Javascript React konva慢速拖动性能，渲染大量线条

在React konva中有大量渲染线时，我在拖动功能方面遇到问题

目前我正在映射

数组。应用（null，数组（10000））

水平渲染行。但是，与仅拖动500行的数组相比，它非常滞后

我准备了codesandbox来说明这个问题：

（水平拖动鼠标以查看效果）

---

任何解决这个问题的想法都将受到欢迎。

好吧，你的形状太多了。浏览器正在做大量工作，将它们全部呈现出来

第一种方法是不渲染不在可见视口中的对象：

导出默认函数App（）{
const[camera，setCamera]=React.useState（{x:0，y:0}）；
常数handleDragEnd=（e）=>{
摄像机({
x:-e.target.x（），
y:-e.target.y（）
});
};
返回(
{Array.apply（null，数组（10000））.map（（z，i）=>{
常数x=i*30；
常数isOut=
xcamera.x+window.innerWidth*2；
如果（isOut）{
返回null；
}
返回(
);
})}
);
}

---

演示：

这正是我一直在寻找的，而且效果非常好。谢谢