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

【问题标题】：Rendering hundreds of thousands of circles with react-konva使用 react-konva 渲染数十万个圆圈
【发布时间】：2019-09-25 17:59:57
【问题描述】：

我正在使用 react-konva 来渲染大型基因数据集，我对 konva 和 react-konva 都很陌生。它易于使用的 api 对代码迭代非常有帮助。但是，我在渲染数以万计的<circle /> or` 组件时遇到了缩放问题。目前，我只是在数据集上进行映射并返回一个圆圈或矩形，因为代码很容易读/写。 konva 是在每个形状上执行 draw() 还是已经批处理了绘制调用？有没有更好的方法，还是建议我改用香草画布或查看 gl 画布选项？

伪/缩写代码说明我目前在做什么如下：

代码示例显示了我尝试过的内容。我使用<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 都是单独保存的。

【问题讨论】：

标签： canvas bigdata visualization react-konva

【解决方案1】：

如果您只想在页面上显示圈子，那么react、konva 和react-konva 是巨大的开销。它会为数千个形状消耗大量内存。

直接使用画布 API（2d 或 webgl）会更好。

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

【讨论】：