在 React Hooks 中使用 Chart.js 作为函数组件
为什么
初始化
如果我们利用React 的useRefhook，就可以直接使用 Chart.js，而无需使用专门为 React 开发的版本。关键代码片段如下所示：
import React, { useEffect, useRef } from 'react';
import Chartjs from 'chart.js';
const chartConfig = {
type: 'bar',
data: {
// ...
},
options: {
// ...
}
};
const Chart = () => {
const chartContainer = useRef(null);
const [chartInstance, setChartInstance] = useState(null);
useEffect(() => {
if (chartContainer && chartContainer.current) {
const newChartInstance = new Chartjs(chartContainer.current, chartConfig);
setChartInstance(newChartInstance);
}
}, [chartContainer]);
return (
<div>
<canvas ref={chartContainer} />
</div>
);
};
export default Chart;
Chart.js 使用DOM Canvas进行渲染，参数ctx是对我们将要挂载图表的元素new Chartjs(ctx, options)的引用。<canvas />
关键在于，该useRef钩子允许我们使用一种效果，通过对chartContainerref 变量的变化做出反应，在 DOM 对象可用时立即初始化我们的图表。
初始化后
初始化时，我们将初始化后的图表赋值给chartInstance状态变量，以便稍后可以更新图表，如下所示：
const updateDataset = (datasetIndex, newData) => {
chartInstance.data.datasets[datasetIndex].data = newData;
chartInstance.update();
};
const onButtonClick = () => {
const data = [1, 2, 3, 4, 5, 6];
updateDataset(0, data);
};
这会更新按钮点击回调函数调用后的图表，但也可以在useEffect回调函数内部完成，或者在任何你可以访问的地方完成chartInstance。
简短但实用的小贴士！
PS：请在 codesandbox.io 上查看运行版本！
文章来源：https://dev.to/vcanales/using-chart-js-in-a-function-component-with-react-hooks-246l