优化图表清理的代码

package.json

@@ -51,7 +51,7 @@
     "react-test-renderer": "^15.6.1",
     "redbox-react": "^1.3.2",
     "roadhog": "^1.0.2",
-    "roadhog-api-doc": "^0.1.5",
+    "roadhog-api-doc": "^0.1.8",
     "stylelint": "^8.1.0",
     "stylelint-config-standard": "^17.0.0"
   },

src/components/ActiveChart/index.js

@@ -22,13 +22,17 @@ export default class ActiveChart extends PureComponent {
   }
 
   componentDidMount() {
-    setInterval(() => {
+    this.timer = setInterval(() => {
       this.setState({
         activeData: getActiveData(),
       });
     }, 1000);
   }
 
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
   render() {
     const { activeData = [] } = this.state;
 

src/components/Charts/Bar/index.js

@@ -14,6 +14,12 @@ class Bar extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
@@ -68,6 +74,8 @@ class Bar extends PureComponent {
     });
     chart.interval().position('x*y').color(color);
     chart.render();
+
+    this.chart = chart;
   }
 
   render() {

src/components/Charts/Gauge/index.js

@@ -16,6 +16,12 @@ class Gauge extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }

src/components/Charts/MiniArea/index.js

@@ -14,6 +14,12 @@ class MiniArea extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
@@ -79,6 +85,8 @@ class MiniArea extends PureComponent {
       chart.line().position('x*y').color(color).shape('smooth');
     }
     chart.render();
+
+    this.chart = chart;
   }
 
   render() {

src/components/Charts/MiniBar/index.js

@@ -14,6 +14,12 @@ class MiniBar extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
@@ -61,6 +67,8 @@ class MiniBar extends PureComponent {
     });
     chart.interval().position('x*y').color(color);
     chart.render();
+
+    this.chart = chart;
   }
 
   render() {

src/components/Charts/Pie/index.js

@@ -20,6 +20,12 @@ class Pie extends Component {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }

src/components/Charts/Radar/index.js

@@ -20,6 +20,12 @@ class Radar extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }

src/components/Charts/WaterWave/index.js

@@ -16,12 +16,18 @@ class WaterWave extends PureComponent {
     this.renderChart();
     this.resize();
 
-    window.addEventListener('resize', () => {
-      this.resize();
-    });
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillUnmount() {
+    cancelAnimationFrame(this.timer);
+    if (this.node) {
+      this.node.innerHTML = '';
+    }
+    window.removeEventListener('resize', this.resize);
   }
 
-  resize() {
+  resize = () => {
     const { height } = this.props;
     const realWidth = this.root.parentNode.offsetWidth;
     if (realWidth < this.props.height) {
@@ -39,6 +45,7 @@ class WaterWave extends PureComponent {
   renderChart() {
     const { percent, color = '#19AFFA' } = this.props;
     const data = percent / 100;
+    const self = this;
 
     if (!this.node || !data) {
       return;
@@ -163,7 +170,7 @@ class WaterWave extends PureComponent {
         sp += 0.07;
         drawSin();
       }
-      requestAnimationFrame(render);
+      self.timer = requestAnimationFrame(render);
     }
 
     render();

src/components/TimelineChart/index.js

@@ -14,6 +14,15 @@ class TimelineChart extends Component {
     }
   }
 
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    if (this.slider) {
+      this.slider.destroy();
+    }
+  }
+
   sliderId = `timeline-chart-slider-${Math.random() * 1000}`
 
   handleRef = (n) => {
@@ -75,6 +84,8 @@ class TimelineChart extends Component {
     chart.line().position('x*y1').color('#4FAAEB');
     chart.line().position('x*y2').color('#9AD681');
 
+    this.chart = chart;
+
     /* eslint new-cap:0 */
     const slider = new Slider({
       domId: this.sliderId,
@@ -84,6 +95,8 @@ class TimelineChart extends Component {
       charts: [chart],
     });
     slider.render();
+
+    this.slider = slider;
   }
 
   render() {