From 1dab3e29d7614dabc2892e407a6c9ce28a78f842 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Thu, 4 Oct 2018 15:32:29 +0800
Subject: [PATCH] Reduce menu renderings

---
 src/components/SiderMenu/BaseMenu.js | 28 ++++++++++++++++++----------
 src/layouts/BasicLayout.js           |  4 +++-
 src/pages/Dashboard/Monitor.js       |  2 +-
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js
index 16f9c479..7048d1dd 100644
--- a/src/components/SiderMenu/BaseMenu.js
+++ b/src/components/SiderMenu/BaseMenu.js
@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 import { Menu, Icon } from 'antd';
 import Link from 'umi/link';
+import isEqual from 'lodash/isEqual';
+import memoizeOne from 'memoize-one';
 import { formatMessage } from 'umi/locale';
 import pathToRegexp from 'path-to-regexp';
 import { urlToList } from '../_utils/pathTools';
@@ -22,12 +24,15 @@ const getIcon = icon => {
   return icon;
 };
 
-export const getMenuMatches = (flatMenuKeys, path) =>
-  flatMenuKeys.filter(item => item && pathToRegexp(item).test(path));
+export const getMenuMatches = memoizeOne(
+  (flatMenuKeys, path) => flatMenuKeys.filter(item => item && pathToRegexp(item).test(path)),
+  isEqual
+);
 
 export default class BaseMenu extends PureComponent {
   constructor(props) {
     super(props);
+    this.getSelectedMenuKeys = memoizeOne(this.getSelectedMenuKeys, isEqual);
     this.flatMenuKeys = this.getFlatMenuKeys(props.menuData);
   }
 
@@ -66,12 +71,10 @@ export default class BaseMenu extends PureComponent {
   };
 
   // Get the currently selected menu
-  getSelectedMenuKeys = () => {
-    const {
-      location: { pathname },
-    } = this.props;
-    return urlToList(pathname).map(itemPath => getMenuMatches(this.flatMenuKeys, itemPath).pop());
-  };
+  getSelectedMenuKeys = pathname =>
+    urlToList(pathname).map(function(itemPath) {
+      return getMenuMatches(this.flatMenuKeys, itemPath).pop();
+    });
 
   /**
    * get SubMenu or Item
@@ -158,9 +161,14 @@ export default class BaseMenu extends PureComponent {
   };
 
   render() {
-    const { openKeys, theme, mode } = this.props;
+    const {
+      openKeys,
+      theme,
+      mode,
+      location: { pathname },
+    } = this.props;
     // if pathname can't match, use the nearest parent's key
-    let selectedKeys = this.getSelectedMenuKeys();
+    let selectedKeys = this.getSelectedMenuKeys(pathname);
     if (!selectedKeys.length && openKeys) {
       selectedKeys = [openKeys[openKeys.length - 1]];
     }
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 731b3b93..9d09d19c 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -46,6 +46,8 @@ function formatter(data, parentPath = '', parentAuthority, parentName) {
   });
 }
 
+const memoizeOneFormatter = memoizeOne(formatter, isEqual);
+
 const query = {
   'screen-xs': {
     maxWidth: 575,
@@ -136,7 +138,7 @@ class BasicLayout extends React.PureComponent {
     const {
       route: { routes },
     } = this.props;
-    return formatter(routes);
+    return memoizeOneFormatter(routes);
   }
 
   /**
diff --git a/src/pages/Dashboard/Monitor.js b/src/pages/Dashboard/Monitor.js
index 17f4f316..a6d68905 100644
--- a/src/pages/Dashboard/Monitor.js
+++ b/src/pages/Dashboard/Monitor.js
@@ -121,7 +121,7 @@ class Monitor extends PureComponent {
             <Card
               title={
                 <FormattedMessage
-                  id="app.monitor.total-activity-forecast"
+                  id="app.monitor.activity-forecast"
                   defaultMessage="Activity forecast"
                 />
               }
-- 
GitLab