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

Question

我正在使用react-konva渲染大型基因数据集，我对konva和react-konva都是相当陌生的。它具有易于使用的api，对代码迭代非常有帮助。然而，我遇到了渲染数万或数十万`或组件的伸缩问题。目前，我只是在数据集上映射，并返回一个圆形或矩形，因为代码非常容易读/写。konva是否对每个形状都执行了一次draw()，或者它已经对draw调用进行了批处理？有没有更好的方法，或者建议我改用香草画布，或者考虑一下gl canvas选项？

伪代码/缩写代码说明了我目前正在做的事情：

代码示例显示了我尝试过的内容。我使用了<FastLayer />，试图让它变得更轻一点。

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>
    );
}

结果加载很慢，当我在chrome dev-tools中检查内存时，我看到每个Circle都是单独持有的。

Answer 1

如果你只想在页面上显示圆圈，那么react、konva和react-konva就是巨大的开销。对于数以千计的形状，它将消耗大量内存。

最好直接使用canvas API (2d或webgl)。

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