目录

窗口自适应

过渡动画

监听宽高：window.listener.resize

防抖优化:lodash-es/debounce

forwardRef暴露结点给父组件（ref）

Echart实例，可直接调用实例的原生函数

React.memo缓存优化：避免重新渲染

---

窗口自适应

过渡动画

// 窗口自适应并开启过渡动画
const resize = () => {
    if(cInstance.current) {
        cInstance.current.resize({
            animation: { duration: 300 },
        });
    }
};

监听宽高：window.listener.resize

// 监听窗口大小
useEffect(() => {
//组件渲染后添加
    window.addEventListener('resize', debounceResize);
//组件卸载后移除
    return () => {
        window.removeEventListener('resize', debounceResize);
    };
}, []);

//手动修改
const EChart = (props) => {
    const { style } = props;
    // 监听高度变化
    useLayoutEffect(() => {
        resize();
    }, [style.width, style.height]);
}

防抖优化:lodash-es/debounce

使用 debounceResize 替换 resize

import debounce from 'lodash-es/debounce';

// 自适应防抖优化
const debounceResize = debounce(resize, 500);

*forwardRef暴露结点给父组件（ref）

Echart实例，可直接调用实例的原生函数

对父组件暴露获取 ECharts 实例的方法，让父组件可直接通过实例调用原生函数。

const EChart = (props, ref) => {
    // 略......
    // 获取实例
    const getInstance = () => cInstance.current;
    // 暴露方法
    useImperativeHandle(ref, () => ({ getInstance }));
}
export default React.forwardRef(EChart);

React.memo缓存优化：避免重新渲染

作为一个全局通用组件，在 props 不变的情况下，跳过重新渲染

export default React.memo(React.forwardRef(EChart));

参考链接：React hooks 封装 ECharts5 通用组件 - 掘金