关于Echarts及echarts-for-react的内存泄漏问题

最近接到大屏需求全部都是图表展示，在测试的时候有两次白屏了，这让我担心会不会是内存泄漏导致的毕竟Echarts真的有这个问题哈。

原因

ECharts在每次setOption后都需要清理变量，在ECharts中是有API手动清理变量的，分别是clear()和dispose()，区别是前者只需插入参数，ECharts就会重绘图表；而后者则是直接将ECharts对象进行清理，需要重新构建ECharts对象。另外，针对IE，也有专门的回收内存函数CollectGarbage，每次浏览器最小化的时候，浏览器都会调用该函数，清理内存。

解决办法

chart.dispose()配合echarts.init()，然后再setOption()。或者调用其clear()方法。
具体可以参见https://github.com/apache/incubator-echarts/issues/4726

echarts-for-react

https://github.com/hustcc/echarts-for-react/blob/master/src/core.jsx#L122
关于这个插件，我看了一下它的解决办法，它在componentDidUpdate和componentWillUnmount两个生命周期内都进行了处理：

componentDidUpdate处理.png

componentWillUnmount处理.png

在 this.dispose方法中它调用了echarts本身的 dispose方法

调用echarts的dispose方法.png

因而这里我们可以看到 echarts-for-react这个插件在编写的时候已经帮助我们避免了这一问题。当然如果有需要，我们自己也可以进行进一步的优化。