Рендеринг сотен тысяч кругов с реактивной конвой - PullRequest
Новая
       19

Рендеринг сотен тысяч кругов с реактивной конвой

0 голосов
/ 25 сентября 2019

Я работаю с response-konva для рендеринга больших генетических наборов данных, и я довольно новичок как в konva, так и в Reaction-konva.Это было чрезвычайно полезно для итерации кода с его простым в использовании API.Однако я сталкиваюсь с проблемами масштабирования при рендеринге десятков / сотен тысяч компонентов <circle /> or `.В настоящее время я просто отображаю набор данных и возвращаю круг или прямоугольник, поскольку код очень легко читать / писать.Делает ли konva draw () для каждой фигуры или она уже группирует вызовы draw?Есть ли лучший способ, или мне порекомендовали перейти на использование vanilla canvas или посмотреть опцию 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, я вижу, что каждый Круг удерживается отдельно..

...