🐛[BUG] DualAxes 内存泄漏和性能问题 #910
Description
🐛 bug 描述 [详细地描述 bug，让大家都能理解]
�DualAxes在重新render几次后，点击Legend会变得非常卡，甚至卡死。
📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]
- 使用类似如下的代码：
import React, { useState } from "react";
import { DualAxes } from "@ant-design/charts";
import { config1, config2 } from "./data.js";
import { Button } from "antd";
import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
import md5 from "md5";
export default function App() {
const [config, setConfig] = useState(config1);
return (
<div>
<Button
onClick={() => {
if (config === config1) {
setConfig(config2);
} else {
setConfig(config1);
}
}}
>
Rerender
</Button>
<div key={md5(JSON.stringify(config))}>
<DualAxes {...config} />
</div>
<div>
<DualAxes {...config} />
</div>
</div>
);
}
- 上面的代码有两个图，点击render按钮会切换
DualAxes的参数，随着点击的次数增多（大概三五次之后）下面的图会变得非常卡。
上面的图是一个Workaround，不是期望的用法，它每次都销毁DIV并重新创建实例，期望的是实例不变的时候更新config不会有性能问题。
- 附上视频和内存泄漏图
dual-axes-performance.mp4
🏞 期望结果 [描述你原本期望看到的结果]
我试过直接用G2Plot，有同样的问题，在不destroy的情况下，直接调用plot.update(options: Partial<PlotOptions>); 更新图表，会有同样的问题。
期望结果：
- G2Plot的DualAxes在不
destroy的情况下，直接调用update之后，不会有性能问题和内存泄漏问题 - ant-design/charts，在不销毁div的情况下，不会有性能问题和内存泄漏问题。
💻 复现代码 [提供可复现的代码，仓库，或线上示例]
下面两个ZIP，第一个是代码。第二个是Chrome的Profile，解压得到json文件，从Chrome开发控制台的Performance导入即可看到
dual-axex-performance-issue.zip
mem_leak_chrome_profile.zip
© 版本信息
- ant-design-charts 版本: [e.g. 0.9.0]
- 浏览器环境
- 开发环境 [e.g. mac OS]