Maybe useful performance optimization

src/components/ActiveChart/index.js

@@ -26,17 +26,26 @@ export default class ActiveChart extends Component {
   };
 
   componentDidMount() {
-    this.timer = setInterval(() => {
-      this.setState({
-        activeData: getActiveData(),
-      });
-    }, 1000);
+    this.loopData();
   }
 
   componentWillUnmount() {
-    clearInterval(this.timer);
+    clearTimeout(this.timer);
   }
-
+  loopData = () => {
+    this.timer = setTimeout(() => {
+      this.setState(
+        {
+          activeData: getActiveData(),
+        },
+        () => {
+          requestAnimationFrame(() => {
+            this.loopData();
+          });
+        }
+      );
+    }, 1000);
+  };
   render() {
     const { activeData = [] } = this.state;
 

src/components/Charts/Bar/index.js

@@ -25,6 +25,7 @@ class Bar extends Component {
     if (!this.node) {
       return;
     }
+    requestAnimationFrame(() => {
       const canvasWidth = this.node.parentNode.clientWidth;
       const { data = [], autoLabel = true } = this.props;
       if (!autoLabel) {
@@ -44,6 +45,7 @@ class Bar extends Component {
           autoHideXLabels: false,
         });
       }
+    });
   }
 
   handleRoot = n => {

src/components/Charts/Pie/index.js

@@ -19,8 +19,6 @@ export default class Pie extends Component {
   };
 
   componentDidMount() {
-    this.getLegendData();
-    this.resize();
     window.addEventListener('resize', this.resize);
   }
 
@@ -46,12 +44,17 @@ export default class Pie extends Component {
 
   getG2Instance = chart => {
     this.chart = chart;
+    requestAnimationFrame(() => {
+      this.getLegendData();
+      this.resize();
+    });
   };
 
   // for custom lengend view
   getLegendData = () => {
     if (!this.chart) return;
     const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
+    if (!geom) return;
     const items = geom.get('dataArray') || []; // 获取图形对应的
 
     const legendData = items.map(item => {
@@ -71,6 +74,7 @@ export default class Pie extends Component {
   @Bind()
   @Debounce(300)
   resize() {
+    requestAnimationFrame(() => {
       const { hasLegend } = this.props;
       if (!hasLegend || !this.root) {
         window.removeEventListener('resize', this.resize);
@@ -87,6 +91,7 @@ export default class Pie extends Component {
           legendBlock: false,
         });
       }
+    });
   }
 
   handleRoot = n => {

src/components/Charts/Radar/index.js

@@ -12,7 +12,9 @@ export default class Radar extends Component {
   };
 
   componentDidMount() {
+    requestAnimationFrame(() => {
       this.getLengendData();
+    });
   }
 
   componentWillReceiveProps(nextProps) {

src/components/Charts/TagCloud/index.js

@@ -19,8 +19,10 @@ class TagCloud extends Component {
   };
 
   componentDidMount() {
+    requestAnimationFrame(() => {
       this.initTagCloud();
       this.renderChart();
+    });
     window.addEventListener('resize', this.resize);
   }
 
@@ -36,7 +38,9 @@ class TagCloud extends Component {
   }
 
   resize = () => {
+    requestAnimationFrame(() => {
       this.renderChart();
+    });
   };
 
   saveRootRef = node => {

src/components/Charts/WaterWave/index.js

@@ -13,9 +13,10 @@ export default class WaterWave extends PureComponent {
   };
 
   componentDidMount() {
+    requestAnimationFrame(() => {
       this.renderChart();
       this.resize();
-
+    });
     window.addEventListener('resize', this.resize);
   }
 
@@ -28,11 +29,13 @@ export default class WaterWave extends PureComponent {
   }
 
   resize = () => {
+    requestAnimationFrame(() => {
       const { height } = this.props;
       const { offsetWidth } = this.root.parentNode;
       this.setState({
         radio: offsetWidth < height ? offsetWidth / height : 1,
       });
+    });
   };
 
   renderChart() {

src/routes/Account/Settings/Info.js

@@ -52,6 +52,7 @@ export default class Info extends Component {
     if (!this.main) {
       return;
     }
+    requestAnimationFrame(() => {
       let mode = 'inline';
       const { offsetWidth } = this.main;
       if (this.main.offsetWidth < 641 && offsetWidth > 400) {
@@ -63,6 +64,7 @@ export default class Info extends Component {
       this.setState({
         mode,
       });
+    });
   };
   render() {
     const { match, routerData, currentUser } = this.props;

src/routes/Forms/AdvancedForm.js

@@ -68,11 +68,13 @@ class AdvancedForm extends PureComponent {
     window.removeEventListener('resize', this.resizeFooterToolbar);
   }
   resizeFooterToolbar = () => {
+    requestAnimationFrame(() => {
       const sider = document.querySelectorAll('.ant-layout-sider')[0];
       const width = `calc(100% - ${sider.style.width})`;
       if (this.state.width !== width) {
         this.setState({ width });
       }
+    });
   };
   render() {
     const { form, dispatch, submitting } = this.props;

src/routes/Profile/AdvancedProfile.js

@@ -212,6 +212,7 @@ export default class AdvancedProfile extends Component {
   @Bind()
   @Debounce(200)
   setStepDirection() {
+    requestAnimationFrame(() => {
       const { stepDirection } = this.state;
       const w = getWindowWidth();
       if (stepDirection !== 'vertical' && w <= 576) {
@@ -223,6 +224,7 @@ export default class AdvancedProfile extends Component {
           stepDirection: 'horizontal',
         });
       }
+    });
   }
 
   render() {