React中多个ECharts组件仅单个响应窗口Resize问题求助

在React项目中渲染两个SimpleLine ECharts组件后，窗口尺寸改变时只有其中一个能触发resize响应，另一个无变化。

问题根源 #

每个组件都通过window.onresize = function() {...}的方式绑定resize事件，这种赋值方式会覆盖之前的监听函数。当第二个组件挂载时，它的resize处理函数会替换第一个组件的，最终只有最后一个组件的resize逻辑生效。

另外，chartInstance2使用普通变量存储，在组件重渲染时会丢失引用，存在潜在风险，应该改用useRef来保持实例的持久引用。

解决步骤 #

1. 改用addEventListener绑定resize事件：多个组件可以同时添加监听，不会互相覆盖。
2. 使用useRef存储图表实例：确保组件生命周期内实例引用不丢失。
3. 组件卸载时移除监听并销毁图表实例：避免内存泄漏。

修改后的SimpleLine组件代码 #

import React, { useRef, useEffect } from "react";
import * as echarts from "echarts";

// 省略xAxisDatas、data、option1的定义，保持原有内容不变

function SimpleLine() {
  const chartRef = useRef(null);
  // 用useRef存储图表实例，替代普通变量
  const chartInstance = useRef(null);

  const renderChart = () => {
    const renderedChartInstance = echarts.getInstanceByDom(chartRef.current);
    if (renderedChartInstance) {
      chartInstance.current = renderedChartInstance;
    } else {
      chartInstance.current = echarts.init(chartRef.current);
    }
    chartInstance.current.setOption(option1, true);
  };

  useEffect(() => {
    renderChart();
    // 组件卸载时销毁图表
    return () => {
      chartInstance.current && chartInstance.current.dispose();
    };
  }, []);

  useEffect(() => {
    const handleResize = () => {
      chartInstance.current && chartInstance.current.resize();
    };
    // 添加resize监听
    window.addEventListener('resize', handleResize);
    // 卸载时移除监听
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div ref={chartRef} style={{ width: "100%", height: "400px" }}></div>
  );
}

export default SimpleLine;

关键改动说明 #

• 用chartInstance = useRef(null)替代let chartInstance2 = null，确保实例引用在组件重渲染时不会丢失。
• 用window.addEventListener('resize', handleResize)替代window.onresize = ...，实现多组件的resize监听共存。
• 在组件卸载的清理函数中移除对应的resize监听，避免无用的事件回调占用内存。

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