Improve TagCloud

package.json

@@ -18,16 +18,17 @@
   },
   "dependencies": {
     "antd": "next",
-    "dva": "^2.0.3",
     "classnames": "^2.2.5",
+    "dva": "^2.0.3",
     "lodash": "^4.17.4",
+    "lodash-decorators": "^4.4.1",
+    "lodash.clonedeep": "^4.5.0",
     "numeral": "^2.0.6",
     "prop-types": "^15.5.10",
     "qs": "^6.5.0",
     "react": "^15.6.2",
     "react-document-title": "^2.0.3",
-    "react-dom": "^15.6.2",
-    "lodash.clonedeep": "^4.5.0"
+    "react-dom": "^15.6.2"
   },
   "devDependencies": {
     "babel-eslint": "^8.0.1",

src/components/Charts/TagCloud/index.js

@@ -2,20 +2,20 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import G2 from 'g2';
 import Cloud from 'g-cloud';
-
+import Debounce from 'lodash-decorators/debounce';
 import styles from './index.less';
 
 /* eslint no-underscore-dangle: 0 */
 /* eslint no-param-reassign: 0 */
-/* eslint no-return-assign: 0 */
 
 const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
-// const imgUrl = 'https://zos.alipayobjects.com/rmsportal/EEFqYWuloqIHRnh.jpg';
 
 class TagCloud extends PureComponent {
   componentDidMount() {
     this.initTagCloud();
-    this.renderChart(this.props.data);
+    this.renderChart();
+
+    window.addEventListener('resize', this.resize);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -24,6 +24,14 @@ class TagCloud extends PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  resize = () => {
+    this.renderChart();
+  }
+
   initTagCloud = () => {
     const { Util, Shape } = G2;
 
@@ -57,7 +65,17 @@ class TagCloud extends PureComponent {
     });
   }
 
-  renderChart(data) {
+  saveRootRef = (node) => {
+    this.root = node;
+  }
+
+  saveNodeRef = (node) => {
+    this.node = node;
+  }
+
+  @Debounce(300)
+  renderChart = (newData) => {
+    const data = newData || this.props.data;
     if (!data || data.length < 1) {
       return;
     }
@@ -137,10 +155,10 @@ class TagCloud extends PureComponent {
     return (
       <div
         className={classNames(styles.tagCloud, this.props.className)}
-        ref={n => (this.root = n)}
+        ref={this.saveRootRef}
         style={{ width: '100%' }}
       >
-        <div ref={n => (this.node = n)} style={{ height: this.props.height }} />
+        <div ref={this.saveNodeRef} style={{ height: this.props.height }} />
       </div>
     );
   }