企业官网建设流程全解析

const echartRef = useRef<any>(null); // 创建 React ref 引用，用于访问 ECharts DOM 元素 // 初始值为 null，当 ReactECharts 组件挂载后会被赋予真实 DOM 元素 useEffect(()=>{ // 副作用：当 chartData 变化时执行 const chart = echartRef.current.getEchartsInstance(); // 获取 ECharts 实例以便调用其方法 if(!chart) return; const resizeObserver = new ResizeObserver(debounce((entries) => { // 创建 ResizeObserver 监听元素尺寸变化 // 使用防抖函数 debounce 延迟 500ms 执行，避免频繁调整 for(const entry of entries){ // 遍历所有监听到变化的元素 if(chart && entry.contentRect.width){ // 检查图表实例存在且宽度有效 chart.resize({ width: entry.contentRect.width, height: entry.contentRect.height, // 调整图表尺寸以匹配容器，也可以单独改变宽度或者高度 }); } } },500)); resizeObserver.observe(echartRef.current); // 开始监听 echartRef.current 元素的尺寸变化 return () => { resizeObserver.disconnect(); // 清理函数：组件卸载时断开监听，防止内存泄漏 } },[chartData]) // 依赖项：当 chartData 变化时重新执行此副作用

注意依赖项不可以是频繁变化，可适当改变依赖项，如果想要更好的性能处理可自行更改，如果有不足之处，欢迎指出