在 React 中使用 ECharts

在编写 React 程序的时候，常常需要使用非 React 的 Library，比如 Plyr、ECharts、gridstack.js 等等。这些 Library 在实例化的时候，通常需要传递一个 HTMLElement。读到这里，多数人的第一反应是使用 ref 获取 DOM，然后通过 useEffect 去执行初始化操作。

熟悉 React 18 的老朋友会知道，严格模式下的 useEffect 会“跑两次”，假如程序因此不往期待的方向运行，心情会很恶劣，坏念头也会油然而生……忍住，千万不要关闭严格模式。

当你想要在 React 中访问 DOM，除了 ref 配合 useEffect、useLayoutEffect 之外，ref 还可以传递一个 callback，在 callback 中同样可以 setup 和 cleanup。

下面是示例以 callback 的形式在 React 中使用 ECharts 的代码：

import { useCallback } from 'react';
import * as echarts from 'echarts';
 
function Chart({ option }) {
	const setupCallback = useCallback(
		(el) => {
			let chartInstance;
			if (el) {
				chartInstance = echarts.init(el);
				chartInstance.setOption(option);
			} else {
				chartInstance?.dispose();
			}
		},
		[option]
	);
 
	return <div ref={setupCallback} />;
}

如果你也想在 React 中避开使用 useEffect 访问 DOM，用 callback 不妨为一种不错的方式。