diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js index 16f9c4790071c24d8be558f71527812acb0e4bf5..7048d1dde1965c09054440d1c11ff8451b1ce921 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 731b3b93f303448341f56c9215853cc574cbe8d0..9d09d19cd2f1a922133e312cf8f43d7a5b74e0ac 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 17f4f31651d30b494bf8dc7be08623a5821d88bc..a6d68905b6397a67d38fbb34a7fa0bca059919fb 100644 --- a/src/pages/Dashboard/Monitor.js +++ b/src/pages/Dashboard/Monitor.js @@ -121,7 +121,7 @@ class Monitor extends PureComponent { }