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,25 +25,27 @@ class Bar extends Component {
     if (!this.node) {
       return;
     }
-    const canvasWidth = this.node.parentNode.clientWidth;
-    const { data = [], autoLabel = true } = this.props;
-    if (!autoLabel) {
-      return;
-    }
-    const minWidth = data.length * 30;
-    const { autoHideXLabels } = this.state;
+    requestAnimationFrame(() => {
+      const canvasWidth = this.node.parentNode.clientWidth;
+      const { data = [], autoLabel = true } = this.props;
+      if (!autoLabel) {
+        return;
+      }
+      const minWidth = data.length * 30;
+      const { autoHideXLabels } = this.state;
 
-    if (canvasWidth <= minWidth) {
-      if (!autoHideXLabels) {
+      if (canvasWidth <= minWidth) {
+        if (!autoHideXLabels) {
+          this.setState({
+            autoHideXLabels: true,
+          });
+        }
+      } else if (autoHideXLabels) {
         this.setState({
-          autoHideXLabels: true,
+          autoHideXLabels: false,
         });
       }
-    } else if (autoHideXLabels) {
-      this.setState({
-        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,22 +74,24 @@ export default class Pie extends Component {
   @Bind()
   @Debounce(300)
   resize() {
-    const { hasLegend } = this.props;
-    if (!hasLegend || !this.root) {
-      window.removeEventListener('resize', this.resize);
-      return;
-    }
-    if (this.root.parentNode.clientWidth <= 380) {
-      if (!this.state.legendBlock) {
+    requestAnimationFrame(() => {
+      const { hasLegend } = this.props;
+      if (!hasLegend || !this.root) {
+        window.removeEventListener('resize', this.resize);
+        return;
+      }
+      if (this.root.parentNode.clientWidth <= 380) {
+        if (!this.state.legendBlock) {
+          this.setState({
+            legendBlock: true,
+          });
+        }
+      } else if (this.state.legendBlock) {
         this.setState({
-          legendBlock: true,
+          legendBlock: false,
         });
       }
-    } else if (this.state.legendBlock) {
-      this.setState({
-        legendBlock: false,
-      });
-    }
+    });
   }
 
   handleRoot = n => {

src/components/Charts/Radar/index.js

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

src/components/Charts/TagCloud/index.js

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

src/components/Charts/WaterWave/index.js

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

src/routes/Account/Settings/Info.js

@@ -52,16 +52,18 @@ export default class Info extends Component {
     if (!this.main) {
       return;
     }
-    let mode = 'inline';
-    const { offsetWidth } = this.main;
-    if (this.main.offsetWidth < 641 && offsetWidth > 400) {
-      mode = 'horizontal';
-    }
-    if (window.innerWidth < 768 && offsetWidth > 400) {
-      mode = 'horizontal';
-    }
-    this.setState({
-      mode,
+    requestAnimationFrame(() => {
+      let mode = 'inline';
+      const { offsetWidth } = this.main;
+      if (this.main.offsetWidth < 641 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      if (window.innerWidth < 768 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      this.setState({
+        mode,
+      });
     });
   };
   render() {

src/routes/Forms/AdvancedForm.js

@@ -68,11 +68,13 @@ class AdvancedForm extends PureComponent {
     window.removeEventListener('resize', this.resizeFooterToolbar);
   }
   resizeFooterToolbar = () => {
-    const sider = document.querySelectorAll('.ant-layout-sider')[0];
-    const width = `calc(100% - ${sider.style.width})`;
-    if (this.state.width !== width) {
-      this.setState({ width });
-    }
+    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,17 +212,19 @@ export default class AdvancedProfile extends Component {
   @Bind()
   @Debounce(200)
   setStepDirection() {
-    const { stepDirection } = this.state;
-    const w = getWindowWidth();
-    if (stepDirection !== 'vertical' && w <= 576) {
-      this.setState({
-        stepDirection: 'vertical',
-      });
-    } else if (stepDirection !== 'horizontal' && w > 576) {
-      this.setState({
-        stepDirection: 'horizontal',
-      });
-    }
+    requestAnimationFrame(() => {
+      const { stepDirection } = this.state;
+      const w = getWindowWidth();
+      if (stepDirection !== 'vertical' && w <= 576) {
+        this.setState({
+          stepDirection: 'vertical',
+        });
+      } else if (stepDirection !== 'horizontal' && w > 576) {
+        this.setState({
+          stepDirection: 'horizontal',
+        });
+      }
+    });
   }
 
   render() {