0ab3861 的改动导致在 ref 和 effect 中无法拿到有效的 ECharts 实例

[refparo]

import EChartsReact from "echarts-for-react";
import { useEffect, useRef } from "react";

export default function App() {
  const echartsRef = useRef();
  useEffect(() => {
    const echartsReact = echartsRef.current;
    if (!echartsReact) {
      return;
    }
    console.log("effect run", echartsReact.getEchartsInstance());
  }, []);
  return (
    <EChartsReact
      ref={(ref) => {
        echartsRef.current = ref;
        if (!ref) {
          return;
        }
        console.log("ref connected", ref.getEchartsInstance());
      }}
      option={{}}
      onChartReady={(instance) => {
        console.log("chart ready", instance);
      }}
    />
  );
}

在 3.0.2，上述代码三次输出的 ECharts 实例都是同一个有效的实例。而更新到 3.0.4 之后，在 ref 和 effect 里都只能拿到这一行创建的临时 ECharts 实例，而没法拿到之后创建的真实实例，只有 onChartReady 里能拿到有效的实例。这样的修改破坏了之前代码的兼容性。

[Soundmark]

我看了一下应该是新版加的divHTMLAttributes导致的，原来的ref是绑定到EChartsReactCore，getEchartsInstance方法也是在EChartsReactCore上，现在ref绑定到div上了

[YDX-2147483647]

在 ref 和 effect 里都只能拿到这一行创建的临时 ECharts 实例，而没法拿到之后创建的真实实例，只有onChartReady里能拿到有效的实例。

我也遇到了这个问题，确实最终 DOM 中<div>上的_echarts_instance_，与useEffect中的 id（无论用chartRef.current.getEchartsInstance().id还是用chartRef.current.ele.getAttribute('_echarts_instance_')获取）不同，但与onChartReady获取到的 id 相同。具体日志可参考这段 DeepSeek 对话（注：我认同 DeepSeek 分析出的问题原因，但不认同 DeepSeek 提供的解决方案）。

useEffect中获取到的实例错误，会导致启用 React StrictMode 时，在chart.getZr()上挂的各种事件监听器失效，例如 #463 (comment) 这个例子（这是 ECharts 官方介绍的监听空白处点击的方法）。
临时解决办法：在onChartReady中加监听器。（只适用于比较简单的监听器）

onChartReady={(chart) => chart.getZr().on(…)}