React ECharts 添加事件后控件多次绘制导致闪烁多次

现象

在React中使用了echarts-for-react依赖库，在绑定了事件时，控件会多次绘制，导致了图形闪烁多次。

原因

echarts-for-react在添加事件时是作为对象传入到onEvents属性中的，对象频繁创建导致，最主要是使用了useState变量。

错误代码

const StackBarChart = ({loading, data}) => {
    
    // ...
    
    const onEvents = {
        click: (params: any) => {
            console.log('click:', params, data);
        },
    };
    
    return <>
        <ReactECharts
                    showLoading={loading}
                    option={options}
                    onEvents={onEvents}
                />
    </>
}

正确代码

第一步：使用useMemo缓存频繁创建的对象。

第二步：使用useRef和useEffect监听传入数据，在点击事件中使用ref.current避免重绘。

const StackBarChart = ({loading, data}) => {
    
    // ...
    
    const dataRef = useRef(data);
    useEffect(() => {
        dataRef.current = data;
    }, [data]);
    
    const onEvents = useMemo(() => ({
        click: (params: any) => {
            console.log('click:', params, dataRef.current);
        },
    }), []);
    
    return <>
        <ReactECharts
                    showLoading={loading}
                    option={options}
                    onEvents={onEvents}
                />
    </>
}