如何在React.js中使用Chart.js销毁已创建的图表？

核心原理：Chart.js 实例本身自带destroy()方法，你只需要将实例持久化存储到引用中，在组件卸载或需要销毁的时机主动调用该方法即可，同时清空引用避免内存泄漏。

1. 函数组件实现（React 16.8+） #

• 用useRef存储Chart实例，不要用state存储，避免触发不必要的重渲染
• 在useEffect的清理函数中调用destroy()方法，组件卸载时会自动触发
• 如果需要在组件未卸载时手动销毁，直接调用实例的destroy()方法即可

import { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const MyChart = () => {
  const chartRef = useRef(null);
  const chartInstanceRef = useRef(null);

  useEffect(() => {
    // 初始化图表
    const ctx = chartRef.current.getContext('2d');
    chartInstanceRef.current = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3]
        }]
      }
    });

    // 清理函数：组件卸载时自动销毁图表
    return () => {
      if (chartInstanceRef.current) {
        chartInstanceRef.current.destroy();
        chartInstanceRef.current = null; // 手动清空引用，加速垃圾回收
      }
    };
  }, []);

  // 手动销毁触发方法示例
  const handleDestroy = () => {
    if (chartInstanceRef.current) {
      chartInstanceRef.current.destroy();
      chartInstanceRef.current = null;
    }
  };

  return (
    <div>
      <canvas ref={chartRef} />
      <button onClick={handleDestroy}>手动销毁图表</button>
    </div>
  );
};

export default MyChart;

2. 类组件实现 #

• 把Chart实例挂载到类的实例属性上
• 在componentWillUnmount生命周期钩子中调用销毁方法

import React from 'react';
import Chart from 'chart.js/auto';

class MyChart extends React.Component {
  chartRef = React.createRef();
  chartInstance = null;

  componentDidMount() {
    const ctx = this.chartRef.current.getContext('2d');
    this.chartInstance = new Chart(ctx, {
      type: 'bar',
      data: { /* 你的图表数据配置 */ }
    });
  }

  componentWillUnmount() {
    // 组件卸载前销毁图表
    if (this.chartInstance) {
      this.chartInstance.destroy();
      this.chartInstance = null;
    }
  }

  handleDestroy = () => {
    // 手动销毁逻辑
    if (this.chartInstance) {
      this.chartInstance.destroy();
      this.chartInstance = null;
    }
  };

  render() {
    return (
      <div>
        <canvas ref={this.chartRef} />
        <button onClick={this.handleDestroy}>手动销毁图表</button>
      </div>
    );
  }
}

export default MyChart;

注意：不要重复初始化同一个canvas节点的Chart实例，每次初始化前如果已有实例存在，必须先销毁旧实例，否则会出现图表叠加、内存泄漏等问题。如果你的图表数据会频繁更新，建议优先用Chart.js自带的update()方法更新数据，而非销毁重建。

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