React中使用AmCharts 4绘制桑基图时出现栈溢出问题

核心原因与对应解决方案 #

• 数据处理递归过深
  桑基图的nodes/links如果用递归逻辑生成，1万条数据会直接耗尽调用栈。把递归改成迭代处理：

  // 用迭代替代递归生成桑基图所需的节点和链接
  function processData(rawData) {
    const nodeMap = new Map();
    const links = [];
    
    for (const item of rawData) {
      const { source, target, value } = item;
      // 注册源节点
      if (!nodeMap.has(source)) {
        nodeMap.set(source, { id: source, name: source });
      }
      // 注册目标节点
      if (!nodeMap.has(target)) {
        nodeMap.set(target, { id: target, name: target });
      }
      // 添加链接
      links.push({ from: source, to: target, value });
    }
    
    return { nodes: Array.from(nodeMap.values()), links };
  }
  

• 组件重复渲染触发重复初始化
  React组件频繁重渲染会反复创建AmCharts实例，叠加递归操作导致栈溢出。用缓存和纯组件优化：

  import { useMemo, useEffect } from 'react';
  
  function SankeyChart({ rawData }) {
    // 缓存处理后的数据，避免每次渲染都重新计算
    const chartData = useMemo(() => processData(rawData), [rawData]);
    
    useEffect(() => {
      // 初始化桑基图
      const chart = am4core.create("chart-container", am4charts.SankeyDiagram);
      chart.data = chartData.links;
      chart.dataFields.fromName = "from";
      chart.dataFields.toName = "to";
      chart.dataFields.value = "value";
  
      // 卸载时销毁实例，避免内存泄漏
      return () => chart.dispose();
    }, [chartData]);
  
    return <div id="chart-container" style={{ width: "100%", height: "600px" }} />;
  }
  
  // 用React.memo阻止无意义的重渲染
  export default React.memo(SankeyChart);
  

• AmCharts内部布局递归优化
  AmCharts默认的布局算法可能在大数据量下触发深层递归，调整配置降低计算复杂度：

  // 减少布局迭代次数、关闭平衡布局以降低递归深度
  chart.layoutAlgorithm.maxIterations = 30;
  chart.layoutAlgorithm.balanced = false;
  

• 分批加载数据
  如果业务允许，不要一次性加载1万条数据，分批渲染降低单次计算压力：

  // 示例：先加载前2000条，滚动到底部再加载后续数据
  const [displayData, setDisplayData] = useState(rawData.slice(0, 2000));
  
  const loadMore = () => {
    const nextBatch = rawData.slice(displayData.length, displayData.length + 2000);
    setDisplayData(prev => [...prev, ...nextBatch]);
  };
  

额外注意点 #

• 务必在组件卸载时调用chart.dispose()，避免内存泄漏引发后续渲染异常。
• 检查useEffect的依赖项，不要把未缓存的函数/对象作为依赖，防止无限触发图表初始化。

内容的提问来源于stack exchange，提问作者eboi