React集成Anychart时每次渲染重复生成图表的问题求助

你遇到的重复生成图表问题，核心是未在组件更新/卸载时清理旧图表实例，导致新图表叠加在旧图表之上。结合React的组件生命周期特性，我们可以通过以下方式修复：

修改后的组件代码 #

import React, { useEffect, useRef } from 'react';

const Chart: React.FunctionComponent = () => {
  // 用ref存储容器元素和图表实例，避免组件重渲染时丢失引用
  const containerRef = useRef<HTMLDivElement>(null);
  const chartRef = useRef<anychart.charts.Line | null>(null);

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

    // 创建图表实例并保存到ref
    const chart = anychart.line();
    chartRef.current = chart;

    // 配置图表数据与样式
    const data = [
      {
        x: '2022-07-26',
        y: '0.29822798232939185',
      },
    ];
    chart.data(data);
    chart.title('Sales of the Most Popular Products of ACME Corp.');
    chart.xAxis().title('Year');
    chart.yAxis().title('Revenue');

    // 绑定容器并绘制图表
    chart.container(containerRef.current);
    chart.draw();

    // 清理函数：组件卸载时销毁旧图表，避免叠加与内存泄漏
    return () => {
      if (chartRef.current) {
        chartRef.current.dispose();
        chartRef.current = null;
      }
    };
  }, []); // 空依赖确保图表只初始化一次

  return <StyledDiv ref={containerRef} />;
};

export default Chart;

关键修复点说明 #

• 用useRef存储图表实例：组件重渲染时ref对象不会被重新创建，能持续保留图表引用，方便后续销毁操作。
• 添加清理函数：useEffect返回的清理函数会在组件卸载时触发，调用dispose()彻底销毁旧图表，避免新图表叠加。
• 使用容器ref替代id：React组件内的ref能精准获取当前组件的容器元素，避免全局id冲突，更符合React组件化思想。

扩展：支持数据更新的场景 #

如果你的图表需要根据外部数据动态更新，可以将data作为useEffect的依赖，在数据变化时更新现有图表而非重新创建：

const Chart: React.FunctionComponent<{ data: Array<{x: string; y: string}> }> = ({ data }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const chartRef = useRef<anychart.charts.Line | null>(null);

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

    // 已有图表则直接更新数据，无需重新创建
    if (chartRef.current) {
      chartRef.current.data(data);
      return;
    }

    // 首次初始化图表（同之前的逻辑）
    const chart = anychart.line();
    chartRef.current = chart;
    chart.data(data);
    chart.title('Sales of the Most Popular Products of ACME Corp.');
    chart.xAxis().title('Year');
    chart.yAxis().title('Revenue');
    chart.container(containerRef.current);
    chart.draw();

    return () => {
      if (chartRef.current) {
        chartRef.current.dispose();
        chartRef.current = null;
      }
    };
  }, [data]); // 依赖data，数据变化时触发更新

  return <StyledDiv ref={containerRef} />;
};

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