# 在 React 中使用

URL: https://caijiao.org/chartjs/08-framework/02-react
Source: docs/chartjs/08-framework/02-react.md
Description: 介绍如何在 React 框架中集成并使用 Chart.js，通过函数组件和 useEffect 钩子实现图表的创建和销毁，结合 ref 获取 canvas 元素。

在 React 中，可以通过函数组件配合 `useEffect` 和 `useRef` 钩子来使用 [Chart.js](/chartjs/)，实现图表的动态渲染和生命周期管理。

下面示例是一个简单的 React 组件，展示如何初始化和销毁 Chart.js 图表。

```jsx
import React, { useRef, useEffect } from "react";
import Chart from "chart.js/auto";

export default function MyChart() {
  const chartRef = useRef(null);
  let chartInstance = null;

  useEffect(() => {
    const ctx = chartRef.current.getContext("2d");
    chartInstance = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["一月", "二月", "三月", "四月", "五月"],
        datasets: [
          {
            label: "销售额",
            data: [12, 19, 3, 5, 2],
            backgroundColor: "rgba(75, 192, 192, 0.7)",
          },
        ],
      },
      options: {
        responsive: true,
        plugins: {
          legend: { display: true },
        },
      },
    });

    return () => {
      chartInstance.destroy();
    };
  }, []);

  return <canvas ref={chartRef} width={600} height={400} />;
}
```

[在线代码演示](/chartjs/demos/28.html)