为什么渲染效率会变慢？

[CodePangZ]

import React, { useRef, useEffect, useState } from 'react';
import { Graph } from '@antv/g6';

const G6Graph: React.FC = () => {
const containerRef = useRef(null);
const graphRef = useRef<Graph | null>(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

// 生成节点数据的函数
const generateNodes = (width: number, height: number, nodeCount: number = 3000) => {
// 开始计时
const startTime = performance.now();

const nodeSize = 6; // 节点大小
const spacing = 2; // 节点间距

// 根据当前宽度计算每行可容纳的节点数量
const nodesPerRow = Math.max(1, Math.floor(width / (nodeSize + spacing)));
// 根据每行节点数计算需要的行数
const rows = Math.ceil(nodeCount / nodesPerRow);

// 生成节点数据
const nodes = [];
for (let i = 0; i < nodeCount; i++) {
  const row = Math.floor(i / nodesPerRow);
  const col = i % nodesPerRow;
  // 计算节点位置
  const x = (col * (nodeSize + spacing)) + nodeSize / 2;
  const y = (row * (nodeSize + spacing)) + nodeSize / 2;
  
  nodes.push({
    id: `node-${i}`,
    style: { x, y, size: nodeSize },
  });
}

// 结束计时并输出耗时
const endTime = performance.now();
const executionTime = endTime - startTime;
console.log(`generateNodes 函数执行耗时: ${executionTime.toFixed(2)} 毫秒`);
console.log(`生成了 ${nodes.length} 个节点，参数: width=${width}, height=${height}, nodeCount=${nodeCount}`);

return { nodes, nodesPerRow, rows };

};

useEffect(() => {
if (!containerRef.current) return;

const width = containerRef.current.clientWidth || 800;
const height = containerRef.current.clientHeight || 800;

setDimensions({ width, height });

// 生成节点数据
const { nodes } = generateNodes(width, height);

// 创建G6图表实例
const graph = new Graph({
  container: containerRef.current,
  width,
  height,
  data: { nodes },
});

graphRef.current = graph;
graph.render();

}, []);

return (
<div
ref={containerRef}
style={{
width: '1000px',
height: '800px',
border: '1px solid #ccc',
overflow: 'hidden',
}}
/>
);
};

export default G6Graph;

这个是我的react组件，但是似乎渲染5000个节点的时候就变得特别慢，长达10s+，G6最新版本