Optimization: Robust code

config/config.js

@@ -165,12 +165,18 @@ export default {
               component: './Account/Center/Center',
               routes: [
                 { path: '/account/center', redirect: '/account/center/articles' },
-                { path: '/account/center/articles', component: './Account/Center/Articles' },
+                {
+                  path: '/account/center/articles',
+                  component: './Account/Center/Articles',
+                },
                 {
                   path: '/account/center/applications',
                   component: './Account/Center/Applications',
                 },
-                { path: '/account/center/projects', component: './Account/Center/Projects' },
+                {
+                  path: '/account/center/projects',
+                  component: './Account/Center/Projects',
+                },
               ],
             },
             {
@@ -179,7 +185,10 @@ export default {
               component: './Account/Settings/Info',
               routes: [
                 { path: '/account/settings', redirect: '/account/settings/base' },
-                { path: '/account/settings/base', component: './Account/Settings/BaseView' },
+                {
+                  path: '/account/settings/base',
+                  component: './Account/Settings/BaseView',
+                },
                 {
                   path: '/account/settings/security',
                   component: './Account/Settings/SecurityView',

src/components/ActiveChart/index.js

@@ -30,10 +30,11 @@ export default class ActiveChart extends Component {
 
   componentWillUnmount() {
     clearTimeout(this.timer);
+    cancelAnimationFrame(this.requestRef);
   }
 
   loopData = () => {
-    requestAnimationFrame(() => {
+    this.requestRef = requestAnimationFrame(() => {
       this.timer = setTimeout(() => {
         this.setState(
           {

src/components/Charts/Pie/index.js

@@ -22,7 +22,7 @@ export default class Pie extends Component {
     window.addEventListener(
       'resize',
       () => {
-        requestAnimationFrame(() => this.resize());
+        this.requestRef = requestAnimationFrame(() => this.resize());
       },
       { passive: true }
     );
@@ -38,6 +38,7 @@ export default class Pie extends Component {
   }
 
   componentWillUnmount() {
+    window.cancelAnimationFrame(this.requestRef);
     window.removeEventListener('resize', this.resize);
     this.resize.cancel();
   }

src/components/Charts/TagCloud/index.js

@@ -35,11 +35,12 @@ class TagCloud extends Component {
 
   componentWillUnmount() {
     this.isUnmount = true;
+    window.cancelAnimationFrame(this.requestRef);
     window.removeEventListener('resize', this.resize);
   }
 
   resize = () => {
-    requestAnimationFrame(() => {
+    this.requestRef = requestAnimationFrame(() => {
       this.renderChart();
     });
   };

src/components/SettingDarwer/index.js

@@ -24,7 +24,8 @@ class SettingDarwer extends PureComponent {
     const {
       setting: { themeColor, colorWeak },
     } = this.props;
-    if (themeColor !== '#1890FF') {
+    // Determine if the component is remounted
+    if (themeColor !== '#1890FF' && themeColor !== window['antd_pro_less_color']) {
       window.less.refresh().then(() => {
         this.colorChange(themeColor);
       });
@@ -32,9 +33,6 @@ class SettingDarwer extends PureComponent {
     if (colorWeak === 'open') {
       document.body.className = 'colorWeak';
     }
-    requestAnimationFrame(() => {
-      this.togglerContent();
-    });
   }
 
   getLayOutSetting = () => {
@@ -139,6 +137,7 @@ class SettingDarwer extends PureComponent {
           '@input-hover-border-color': color,
         })
         .then(() => {
+          window['antd_pro_less_color'] = color;
           hideMessage();
         })
         .catch(() => {
@@ -152,6 +151,7 @@ class SettingDarwer extends PureComponent {
     const { collapse, silderTheme, themeColor, layout, colorWeak } = setting;
     return (
       <Drawer
+        firstEnter={true}
         visible={collapse}
         width={273}
         onClose={this.togglerContent}

src/models/setting.js

 const defaultSetting = {
-  collapse: true,
+  collapse: false,
   silderTheme: 'dark',
   themeColor: '#1890FF',
   layout: 'sidemenu',

src/pages/layouts/BasicLayout.js

@@ -63,13 +63,15 @@ const query = {
 };
 
 class BasicLayout extends React.PureComponent {
+  state = {
+    rendering: true,
+  };
   constructor(props) {
     super(props);
     const { menuData } = this.props;
     this.getPageTitle = memoizeOne(this.getPageTitle);
     this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
   }
-
   getContext() {
     const { location } = this.props;
     return {
@@ -77,7 +79,6 @@ class BasicLayout extends React.PureComponent {
       breadcrumbNameMap: this.breadcrumbNameMap,
     };
   }
-
   getPageTitle = pathname => {
     let currRouterData = null;
     // match params path
@@ -142,7 +143,16 @@ class BasicLayout extends React.PureComponent {
       payload: collapsed,
     });
   };
-
+  componentDidMount() {
+    this.renderRef = requestAnimationFrame(() => {
+      this.setState({
+        rendering: false,
+      });
+    });
+  }
+  componentWillUnmount() {
+    cancelAnimationFrame(this.renderRef);
+  }
   render() {
     const {
       isMobile,
@@ -170,20 +180,19 @@ class BasicLayout extends React.PureComponent {
         </Layout>
       </Layout>
     );
-
     return (
-      <DocumentTitle title={this.getPageTitle(pathname)}>
-        <ContainerQuery query={query}>
-          {params => (
-            <Context.Provider value={this.getContext()}>
-              <div className={classNames(params)}>
-                {layout}
-                <SettingDarwer />
-              </div>
-            </Context.Provider>
-          )}
-        </ContainerQuery>
-      </DocumentTitle>
+      <React.Fragment>
+        <DocumentTitle title={this.getPageTitle(pathname)}>
+          <ContainerQuery query={query}>
+            {params => (
+              <Context.Provider value={this.getContext()}>
+                <div className={classNames(params)}>{layout}</div>
+              </Context.Provider>
+            )}
+          </ContainerQuery>
+        </DocumentTitle>
+        {this.state.rendering ? null : <SettingDarwer />}
+      </React.Fragment>
     );
   }
 }

src/pages/layouts/LoadingPage.js

@@ -10,14 +10,21 @@ const menuData = config['routes'];
 // Conversion router to menu.
 function formatter(data, parentPath = '', parentAuthority, parentName) {
   return data.map(item => {
-    const id = parentName ? `${parentName}.${item.name}` : `menu.${item.name}`;
+    let locale = 'menu';
+    if (parentName && item.name) {
+      locale = `${parentName}.${item.name}`;
+    } else if (item.name) {
+      locale = `menu.${item.name}`;
+    } else if (parentName) {
+      locale = parentName;
+    }
     const result = {
       ...item,
-      locale: id,
+      locale,
       authority: item.authority || parentAuthority,
     };
     if (item.routes) {
-      const children = formatter(item.routes, `${parentPath}${item.path}/`, item.authority, id);
+      const children = formatter(item.routes, `${parentPath}${item.path}/`, item.authority, locale);
       // Reduce memory usage
       result.children = children;
     }