Canvas 使用react konva渲染数十万个圆

我正在与react-konva合作绘制大型基因数据集，我对konva和react-konva都是新手。它具有易于使用的api，对代码迭代非常有帮助。但是，我在呈现成千上万的

或
`组件时遇到了缩放问题。目前，我只是在数据集上映射并返回一个圆或rect，因为代码很容易读/写。konva是对每个形状执行draw（），还是已经批处理draw调用？有没有更好的方法，或者建议我改用香草画布或查看gl画布选项

下面是说明我当前所做工作的伪代码/缩写代码：

代码示例显示了我所做的尝试。我用
试着让它更轻一点

import React from 'react';
import { Stage, FastLayer, Circle } from 'react-konva'; 

const RADIUS = 2;

const getLargeDataset = (width, height) => Array.from({ length: 100000 }).map((_, i) => ({
    x: Math.random() * width,
    y: Math.random() * height
}));

function CirclePlot({ width, height }) {
    const largeDataset = getLargeDataset(width, height);

    return (
        <Stage
            height={height}
            width={width}
        >
            <FastLayer>
                {largeDataset.map(({ x, y }, i) => (
                    <Circle
                        key={`circle:${i}`}
                        x={x}
                        y={y}
                        radius={RADIUS}
                    />
                ))}
            </FastLayer>
        </Stage>
    );
}

从“React”导入React；
从“react konva”导入{Stage、FastLayer、Circle}；
常数半径=2；
const getLargeDataset=（宽度，高度）=>Array.from（{length:100000}）.map（{uu，i）=>({
x:Math.random（）*宽度，
y:Math.random（）*高度
}));
函数圈图（{宽度，高度}）{
常量数据集=getLargeDataset（宽度、高度）；
返回(
{largeDataset.map（{x，y}，i）=>(
))}
);
}

加载结果很慢，当我检查chrome dev工具中的内存时，我看到每个圆圈都被分开保存。
如果你只想在页面上显示圆圈，那么
react
，
konva
和
react konva
是巨大的开销。它将为数千个形状消耗大量内存

最好直接使用画布API（2d或webgl）

或者可以考虑一些简化绘图的方法。例如，如果圆在屏幕上不可见，则不要渲染圆。
如果只想在页面上显示圆，则
react
，
konva
和
react konva
是巨大的开销。它将为数千个形状消耗大量内存

最好直接使用画布API（2d或webgl）

或者可以考虑一些简化绘图的方法。例如，如果圆在屏幕上不可见，则不渲染圆