fix lint error

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     'react/jsx-no-bind': [0],
     'react/prop-types': [0],
     'react/prefer-stateless-function': [0],
+    'react/jsx-one-expression-per-line': [0],
     'react/jsx-wrap-multilines': [
       'error',
       {

src/components/ActiveChart/index.js

@@ -32,6 +32,7 @@ export default class ActiveChart extends Component {
   componentWillUnmount() {
     clearTimeout(this.timer);
   }
+
   loopData = () => {
     this.timer = setTimeout(() => {
       this.setState(
@@ -46,6 +47,7 @@ export default class ActiveChart extends Component {
       );
     }, 1000);
   };
+
   render() {
     const { activeData = [] } = this.state;
 

src/components/Authorized/PromiseRender.js

@@ -5,13 +5,16 @@ export default class PromiseRender extends React.PureComponent {
   state = {
     component: null,
   };
+
   componentDidMount() {
     this.setRenderComponent(this.props);
   }
+
   componentDidUpdate(nextProps) {
     // new Props enter
     this.setRenderComponent(nextProps);
   }
+
   // set render Component : ok or error
   setRenderComponent(props) {
     const ok = this.checkIsInstantiation(props.ok);
@@ -28,6 +31,7 @@ export default class PromiseRender extends React.PureComponent {
         });
       });
   }
+
   // Determine whether the incoming component has been instantiated
   // AuthorizedRoute is already instantiated
   // Authorized  render is already instantiated, children is no instantiated
@@ -38,10 +42,11 @@ export default class PromiseRender extends React.PureComponent {
     }
     return () => target;
   };
+
   render() {
-    const Component = this.state.component;
-    return Component ? (
-      <Component {...this.props} />
+    const { component } = this.state;
+    return component ? (
+      <component {...this.props} />
     ) : (
       <div
         style={{

src/components/Charts/Pie/index.js

@@ -29,12 +29,14 @@ export default class Pie extends Component {
   }
 
   componentDidUpdate(preProps) {
-    if (this.props.data !== preProps.data) {
+    const { data } = this.props;
+    if (data !== preProps.data) {
       // because of charts data create when rendered
       // so there is a trick for get rendered time
       this.getLegendData();
     }
   }
+
   componentWillUnmount() {
     window.removeEventListener('resize', this.resize);
     this.resize.cancel();
@@ -68,28 +70,6 @@ export default class Pie extends Component {
     });
   };
 
-  // for window resize auto responsive legend
-  @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) {
-        this.setState({
-          legendBlock: true,
-        });
-      }
-    } else if (this.state.legendBlock) {
-      this.setState({
-        legendBlock: false,
-      });
-    }
-  }
-
   handleRoot = n => {
     this.root = n;
   };
@@ -112,6 +92,29 @@ export default class Pie extends Component {
     });
   };
 
+  // for window resize auto responsive legend
+  @Bind()
+  @Debounce(300)
+  resize() {
+    const { hasLegend } = this.props;
+    const { legendBlock } = this.state;
+    if (!hasLegend || !this.root) {
+      window.removeEventListener('resize', this.resize);
+      return;
+    }
+    if (this.root.parentNode.clientWidth <= 380) {
+      if (!legendBlock) {
+        this.setState({
+          legendBlock: true,
+        });
+      }
+    } else if (legendBlock) {
+      this.setState({
+        legendBlock: false,
+      });
+    }
+  }
+
   render() {
     const {
       valueFormat,
@@ -137,9 +140,10 @@ export default class Pie extends Component {
     });
 
     const defaultColors = colors;
-    let data = this.props.data || [];
-    let selected = this.props.selected || true;
-    let tooltip = this.props.tooltip || true;
+    let { data, selected, tooltip } = this.props;
+    data = data || [];
+    selected = selected || true;
+    tooltip = tooltip || true;
     let formatColor;
 
     const scale = {

src/components/CountDown/index.js

@@ -23,32 +23,25 @@ const initTime = props => {
 };
 
 class CountDown extends Component {
+  timer = 0;
+
+  interval = 1000;
+
   constructor(props) {
     super(props);
-
     const { lastTime } = initTime(props);
-
     this.state = {
       lastTime,
     };
   }
 
-  static getDerivedStateFromProps(nextProps, preState) {
-    const { lastTime } = initTime(nextProps);
-    if (preState.lastTime !== lastTime) {
-      return {
-        lastTime,
-      };
-    }
-    return null;
-  }
-
   componentDidMount() {
     this.tick();
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.target !== prevProps.target) {
+    const { target } = this.props;
+    if (target !== prevProps.target) {
       clearTimeout(this.timer);
       this.tick();
     }
@@ -58,8 +51,16 @@ class CountDown extends Component {
     clearTimeout(this.timer);
   }
 
-  timer = 0;
-  interval = 1000;
+  static getDerivedStateFromProps(nextProps, preState) {
+    const { lastTime } = initTime(nextProps);
+    if (preState.lastTime !== lastTime) {
+      return {
+        lastTime,
+      };
+    }
+    return null;
+  }
+
   // defaultFormat = time => (
   //  <span>{moment(time).format('hh:mm:ss')}</span>
   // );
@@ -76,6 +77,7 @@ class CountDown extends Component {
       </span>
     );
   };
+
   tick = () => {
     const { onEnd } = this.props;
     let { lastTime } = this.state;

src/components/EditableItem/index.js

@@ -3,23 +3,32 @@ import { Input, Icon } from 'antd';
 import styles from './index.less';
 
 export default class EditableItem extends PureComponent {
-  state = {
-    value: this.props.value,
-    editable: false,
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
+      editable: false,
+    };
+  }
+
   handleChange = e => {
     const { value } = e.target;
     this.setState({ value });
   };
+
   check = () => {
     this.setState({ editable: false });
-    if (this.props.onChange) {
-      this.props.onChange(this.state.value);
+    const { value } = this.state;
+    const { onChange } = this.state;
+    if (onChange) {
+      onChange(value);
     }
   };
+
   edit = () => {
     this.setState({ editable: true });
   };
+
   render() {
     const { value, editable } = this.state;
     return (

src/components/EditableLinkGroup/index.js

@@ -17,6 +17,7 @@ class EditableLinkGroup extends PureComponent {
     onAdd: () => {},
     linkElement: 'a',
   };
+
   render() {
     const { links, linkElement, onAdd } = this.props;
     return (

src/components/GlobalHeader/RightContent.js

@@ -38,6 +38,7 @@ export default class GlobalHeaderRight extends PureComponent {
     });
     return groupBy(newNotices, 'type');
   }
+
   render() {
     const {
       currentUser,
@@ -45,6 +46,7 @@ export default class GlobalHeaderRight extends PureComponent {
       onNoticeVisibleChange,
       onMenuClick,
       onNoticeClear,
+      theme,
     } = this.props;
     const menu = (
       <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
@@ -65,7 +67,7 @@ export default class GlobalHeaderRight extends PureComponent {
     );
     const noticeData = this.getNoticeData();
     let className = styles.right;
-    if (this.props.theme === 'dark') {
+    if (theme === 'dark') {
       className = `${styles.right}  ${styles.dark}`;
     }
     return (

src/components/HeaderSearch/index.js

@@ -25,44 +25,58 @@ export default class HeaderSearch extends PureComponent {
     defaultOpen: false,
   };
 
-  state = {
-    searchMode: this.props.defaultOpen,
-    value: '',
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchMode: props.defaultOpen,
+      value: '',
+    };
+  }
+
   componentWillUnmount() {
     clearTimeout(this.timeout);
   }
+
   onKeyDown = e => {
     if (e.key === 'Enter') {
+      const { onPressEnter } = this.props;
+      const { value } = this.state;
       this.timeout = setTimeout(() => {
-        this.props.onPressEnter(this.state.value); // Fix duplicate onPressEnter
+        onPressEnter(value); // Fix duplicate onPressEnter
       }, 0);
     }
   };
+
   onChange = value => {
+    const { onChange } = this.props;
     this.setState({ value });
-    if (this.props.onChange) {
-      this.props.onChange();
+    if (onChange) {
+      onChange();
     }
   };
+
   enterSearchMode = () => {
     this.setState({ searchMode: true }, () => {
-      if (this.state.searchMode) {
+      const { searchMode } = this.state;
+      if (searchMode) {
         this.input.focus();
       }
     });
   };
+
   leaveSearchMode = () => {
     this.setState({
       searchMode: false,
       value: '',
     });
   };
+
   render() {
     const { className, placeholder, ...restProps } = this.props;
     delete restProps.defaultOpen; // for rc-select not affected
+    const { searchMode, value } = this.state;
     const inputClass = classNames(styles.input, {
-      [styles.show]: this.state.searchMode,
+      [styles.show]: searchMode,
     });
     return (
       <span className={classNames(className, styles.headerSearch)} onClick={this.enterSearchMode}>
@@ -71,7 +85,7 @@ export default class HeaderSearch extends PureComponent {
           key="AutoComplete"
           {...restProps}
           className={inputClass}
-          value={this.state.value}
+          value={value}
           onChange={this.onChange}
         >
           <Input

src/components/Login/LoginItem.js

@@ -14,14 +14,18 @@ class WarpFormItem extends Component {
       count: 0,
     };
   }
+
   componentDidMount() {
-    if (this.props.updateActive) {
-      this.props.updateActive(this.props.name);
+    const { updateActive, name } = this.props;
+    if (updateActive) {
+      updateActive(name);
     }
   }
+
   componentWillUnmount() {
     clearInterval(this.interval);
   }
+
   onGetCaptcha = () => {
     const { onGetCaptcha } = this.props;
     const result = onGetCaptcha ? onGetCaptcha() : null;
@@ -34,6 +38,7 @@ class WarpFormItem extends Component {
       this.runGetCaptchaCountDown();
     }
   };
+
   getFormItemOptions = ({ onChange, defaultValue, rules }) => {
     const options = {
       rules: rules || this.customprops.rules,
@@ -46,8 +51,10 @@ class WarpFormItem extends Component {
     }
     return options;
   };
+
   runGetCaptchaCountDown = () => {
-    let count = this.props.countDown || 59;
+    const { countDown } = this.props;
+    let count = countDown || 59;
     this.setState({ count });
     this.interval = setInterval(() => {
       count -= 1;
@@ -57,10 +64,13 @@ class WarpFormItem extends Component {
       }
     }, 1000);
   };
+
   render() {
     const { count } = this.state;
 
-    const { getFieldDecorator } = this.props.form;
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
 
     // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props
     const {
@@ -70,6 +80,7 @@ class WarpFormItem extends Component {
       rules,
       name,
       updateActive,
+      type,
       ...restProps
     } = this.props;
 
@@ -77,15 +88,13 @@ class WarpFormItem extends Component {
     const options = this.getFormItemOptions(this.props);
 
     const otherProps = restProps || {};
-    if (this.props.type === 'Captcha') {
+    if (type === 'Captcha') {
       const inputProps = omit(otherProps, ['onGetCaptcha']);
       return (
         <FormItem>
           <Row gutter={8}>
             <Col span={16}>
-              {getFieldDecorator(name, options)(
-                <Input {...this.props.customprops} {...inputProps} />
-              )}
+              {getFieldDecorator(name, options)(<Input {...customprops} {...inputProps} />)}
             </Col>
             <Col span={8}>
               <Button
@@ -103,7 +112,7 @@ class WarpFormItem extends Component {
     }
     return (
       <FormItem>
-        {getFieldDecorator(name, options)(<Input {...this.props.customprops} {...otherProps} />)}
+        {getFieldDecorator(name, options)(<Input {...customprops} {...otherProps} />)}
       </FormItem>
     );
   }

src/components/Login/LoginTab.js

@@ -17,11 +17,15 @@ class LoginTab extends Component {
     super(props);
     this.uniqueId = generateId('login-tab-');
   }
+
   componentDidMount() {
-    this.props.tabUtil.addTab(this.uniqueId);
+    const { tabUtil } = this.props;
+    tabUtil.addTab(this.uniqueId);
   }
+
   render() {
-    return <TabPane {...this.props}>{this.props.children}</TabPane>;
+    const { children } = this.props;
+    return <TabPane {...this.props}>{children}</TabPane>;
   }
 }
 

src/components/Login/index.js

@@ -23,32 +23,40 @@ class Login extends Component {
     onSubmit: () => {},
   };
 
-  state = {
-    type: this.props.defaultActiveKey,
-    tabs: [],
-    active: {},
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      type: props.defaultActiveKey,
+      tabs: [],
+      active: {},
+    };
+  }
+
   onSwitch = type => {
     this.setState({
       type,
     });
-    this.props.onTabChange(type);
+    const { onTabChange } = this.props;
+    onTabChange(type);
   };
+
   getContext = () => {
+    const { tabs } = this.state;
+    const { form } = this.props;
     return {
       tabUtil: {
         addTab: id => {
           this.setState({
-            tabs: [...this.state.tabs, id],
+            tabs: [...tabs, id],
           });
         },
         removeTab: id => {
           this.setState({
-            tabs: this.state.tabs.filter(currentId => currentId !== id),
+            tabs: tabs.filter(currentId => currentId !== id),
           });
         },
       },
-      form: this.props.form,
+      form,
       updateActive: activeItem => {
         const { type, active } = this.state;
         if (active[type]) {
@@ -62,14 +70,17 @@ class Login extends Component {
       },
     };
   };
+
   handleSubmit = e => {
     e.preventDefault();
     const { active, type } = this.state;
     const activeFileds = active[type];
-    this.props.form.validateFields(activeFileds, { force: true }, (err, values) => {
-      this.props.onSubmit(err, values);
+    const { form, onSubmit } = this.props;
+    form.validateFields(activeFileds, { force: true }, (err, values) => {
+      onSubmit(err, values);
     });
   };
+
   render() {
     const { className, children } = this.props;
     const { type, tabs } = this.state;

src/components/NoticeIcon/index.js

@@ -21,23 +21,19 @@ export default class NoticeIcon extends PureComponent {
     },
     emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
   };
-  constructor(props) {
-    super(props);
-    this.state = {};
-    if (props.children && props.children[0]) {
-      this.state.tabType = props.children[0].props.title;
-    }
-  }
+
   onItemClick = (item, tabProps) => {
     const { onItemClick } = this.props;
     onItemClick(item, tabProps);
   };
+
   onTabChange = tabType => {
-    this.setState({ tabType });
-    this.props.onTabChange(tabType);
+    const onTabChange = this.props;
+    onTabChange(tabType);
   };
+
   getNotificationBox() {
-    const { children, loading, locale } = this.props;
+    const { children, loading, locale, onClear } = this.props;
     if (!children) {
       return null;
     }
@@ -52,7 +48,7 @@ export default class NoticeIcon extends PureComponent {
             {...child.props}
             data={child.props.list}
             onClick={item => this.onItemClick(item, child.props)}
-            onClear={() => this.props.onClear(child.props.title)}
+            onClear={() => onClear(child.props.title)}
             title={child.props.title}
             locale={locale}
           />
@@ -67,8 +63,9 @@ export default class NoticeIcon extends PureComponent {
       </Spin>
     );
   }
+
   render() {
-    const { className, count, popupAlign, onPopupVisibleChange } = this.props;
+    const { className, count, popupAlign, popupVisible, onPopupVisibleChange } = this.props;
     const noticeButtonClass = classNames(className, styles.noticeButton);
     const notificationBox = this.getNotificationBox();
     const trigger = (
@@ -83,7 +80,7 @@ export default class NoticeIcon extends PureComponent {
     }
     const popoverProps = {};
     if ('popupVisible' in this.props) {
-      popoverProps.visible = this.props.popupVisible;
+      popoverProps.visible = popupVisible;
     }
     return (
       <Popover

src/components/PageHeader/index.js

@@ -27,29 +27,36 @@ export default class PageHeader extends PureComponent {
   }
 
   componentDidUpdate(preProps) {
-    if (preProps.tabActiveKey !== this.props.tabActiveKey) {
+    const { tabActiveKey } = this.props;
+    if (preProps.tabActiveKey !== tabActiveKey) {
       this.getBreadcrumbDom();
     }
   }
+
   onChange = key => {
-    if (this.props.onTabChange) {
-      this.props.onTabChange(key);
+    const { onTabChange } = this.props;
+    if (onTabChange) {
+      onTabChange(key);
     }
   };
+
   getBreadcrumbProps = () => {
+    const { routes, params, location, breadcrumbNameMap } = this.props;
     return {
-      routes: this.props.routes,
-      params: this.props.params,
-      routerLocation: this.props.location,
-      breadcrumbNameMap: this.props.breadcrumbNameMap,
+      routes,
+      params,
+      routerLocation: location,
+      breadcrumbNameMap,
     };
   };
+
   getBreadcrumbDom = () => {
     const breadcrumb = this.conversionBreadcrumbList();
     this.setState({
       breadcrumb,
     });
   };
+
   // Generated according to props
   conversionFromProps = () => {
     const { breadcrumbList, breadcrumbSeparator, linkElement = 'a' } = this.props;
@@ -71,6 +78,7 @@ export default class PageHeader extends PureComponent {
       </Breadcrumb>
     );
   };
+
   conversionFromLocation = (routerLocation, breadcrumbNameMap) => {
     const { breadcrumbSeparator, linkElement = 'a' } = this.props;
     // Convert the url to an array
@@ -107,6 +115,7 @@ export default class PageHeader extends PureComponent {
       </Breadcrumb>
     );
   };
+
   /**
    * 将参数转化为面包屑
    * Convert parameters into breadcrumbs
@@ -137,6 +146,7 @@ export default class PageHeader extends PureComponent {
     }
     return null;
   };
+
   // 渲染Breadcrumb 子节点
   // Render the Breadcrumb child node
   itemRender = (route, params, routes, paths) => {
@@ -178,10 +188,10 @@ export default class PageHeader extends PureComponent {
     if (tabActiveKey !== undefined) {
       activeKeyProps.activeKey = tabActiveKey;
     }
-
+    const { breadcrumb } = this.state;
     return (
       <div className={clsString}>
-        {this.state.breadcrumb}
+        {breadcrumb}
         <div className={styles.detail}>
           {logo && <div className={styles.logo}>{logo}</div>}
           <div className={styles.main}>

src/components/SettingDarwer/index.js

@@ -21,7 +21,9 @@ const Body = ({ children, title, style }) => (
 @connect(({ setting }) => ({ setting }))
 class SettingDarwer extends PureComponent {
   componentDidMount() {
-    const { themeColor, colorWeak } = this.props.setting;
+    const {
+      setting: { themeColor, colorWeak },
+    } = this.props;
     if (themeColor !== '#1890FF') {
       window.less.refresh().then(() => {
         this.colorChange(themeColor);
@@ -31,8 +33,11 @@ class SettingDarwer extends PureComponent {
       document.body.className = 'colorWeak';
     }
   }
+
   getLayOutSetting = () => {
-    const { grid, fixedHeader, autoHideHeader, fixSiderbar } = this.props.setting;
+    const {
+      setting: { grid, fixedHeader, autoHideHeader, fixSiderbar },
+    } = this.props;
     return [
       {
         title: '栅格模式',
@@ -83,8 +88,10 @@ class SettingDarwer extends PureComponent {
       return !item.hide;
     });
   };
+
   changeSetting = (key, value) => {
-    const nextState = { ...this.props.setting };
+    const { setting } = this.props;
+    const nextState = { ...setting };
     nextState[key] = value;
     if (key === 'layout') {
       if (value === 'topmenu') {
@@ -106,15 +113,19 @@ class SettingDarwer extends PureComponent {
       }
     }
     this.setState(nextState, () => {
-      this.props.dispatch({
+      const { dispatch } = this.props;
+      dispatch({
         type: 'setting/changeSetting',
         payload: this.state,
       });
     });
   };
+
   togglerContent = () => {
-    this.changeSetting('collapse', !this.props.setting.collapse);
+    const { setting } = this.props;
+    this.changeSetting('collapse', !setting.collapse);
   };
+
   colorChange = color => {
     this.changeSetting('themeColor', color);
     const hideMessage = message.loading('正在编译主题！', 0);
@@ -131,8 +142,11 @@ class SettingDarwer extends PureComponent {
         });
     }, 200);
   };
+
   render() {
-    const { collapse, silderTheme, themeColor, layout, colorWeak } = this.props.setting;
+    const {
+      setting: { collapse, silderTheme, themeColor, layout, colorWeak },
+    } = this.props;
     return (
       <div className={styles.settingDarwer}>
         <DrawerMenu

src/components/SiderMenu/BaseMenu.js

@@ -32,6 +32,7 @@ export default class BaseMenu extends PureComponent {
     super(props);
     this.flatMenuKeys = this.getFlatMenuKeys(props.menuData);
   }
+
   /**
    * Recursively flatten the data
    * [{path:string},{path:string}] => {path,path2}
@@ -47,6 +48,7 @@ export default class BaseMenu extends PureComponent {
     });
     return keys;
   }
+
   /**
    * 获得菜单子节点
    * @memberof SiderMenu
@@ -64,6 +66,7 @@ export default class BaseMenu extends PureComponent {
       })
       .filter(item => item);
   };
+
   // Get the currently selected menu
   getSelectedMenuKeys = () => {
     const {
@@ -71,6 +74,7 @@ export default class BaseMenu extends PureComponent {
     } = this.props;
     return urlToList(pathname).map(itemPath => getMenuMatches(this.flatMenuKeys, itemPath).pop());
   };
+
   /**
    * get SubMenu or Item
    */
@@ -97,6 +101,7 @@ export default class BaseMenu extends PureComponent {
       return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
     }
   };
+
   /**
    * 判断是否是http链接.返回 Link 或 a
    * Judge whether it is http link.return a or Link
@@ -115,15 +120,16 @@ export default class BaseMenu extends PureComponent {
         </a>
       );
     }
+    const { location, isMobile, onCollapse } = this.props;
     return (
       <Link
         to={itemPath}
         target={target}
-        replace={itemPath === this.props.location.pathname}
+        replace={itemPath === location.pathname}
         onClick={
-          this.props.isMobile
+          isMobile
             ? () => {
-                this.props.onCollapse(true);
+                onCollapse(true);
               }
             : undefined
         }
@@ -133,14 +139,17 @@ export default class BaseMenu extends PureComponent {
       </Link>
     );
   };
+
   // permission to check
   checkPermissionItem = (authority, ItemDom) => {
-    if (this.props.Authorized && this.props.Authorized.check) {
-      const { check } = this.props.Authorized;
+    const { Authorized } = this.props;
+    if (Authorized && Authorized.check) {
+      const { check } = Authorized;
       return check(authority, ItemDom);
     }
     return ItemDom;
   };
+
   conversionPath = path => {
     if (path && path.indexOf('http') === 0) {
       return path;
@@ -148,6 +157,7 @@ export default class BaseMenu extends PureComponent {
       return `/${path || ''}`.replace(/\/+/g, '/');
     }
   };
+
   render() {
     const { openKeys, theme, mode } = this.props;
     // if pathname can't match, use the nearest parent's key
@@ -161,17 +171,18 @@ export default class BaseMenu extends PureComponent {
         openKeys,
       };
     }
+    const { handleOpenChange, style, menuData } = this.props;
     return (
       <Menu
         key="Menu"
         mode={mode}
         theme={theme}
-        onOpenChange={this.props.handleOpenChange}
+        onOpenChange={handleOpenChange}
         selectedKeys={selectedKeys}
-        style={this.props.style}
+        style={style}
         {...props}
       >
-        {this.getNavMenuItems(this.props.menuData)}
+        {this.getNavMenuItems(menuData)}
       </Menu>
     );
   }

src/components/SiderMenu/SliderMenu.js

@@ -16,10 +16,11 @@ const { SubMenu } = Menu;
 const getDefaultCollapsedSubMenus = props => {
   const {
     location: { pathname },
+    flatMenuKeys,
   } = props;
   return urlToList(pathname)
     .map(item => {
-      return getMenuMatches(props.flatMenuKeys, item)[0];
+      return getMenuMatches(flatMenuKeys, item)[0];
     })
     .filter(item => item);
 };
@@ -69,7 +70,6 @@ export default class SiderMenu extends PureComponent {
     super(props);
     this.flatMenuKeys = getFlatMenuKeys(props.menuData);
     this.state = {
-      pathname: props.location.pathname,
       openKeys: getDefaultCollapsedSubMenus(props),
     };
   }
@@ -84,6 +84,7 @@ export default class SiderMenu extends PureComponent {
     }
     return null;
   }
+
   /**
    * Convert pathname to openKeys
    * /list/search/articles = > ['list','/list/search']
@@ -96,6 +97,7 @@ export default class SiderMenu extends PureComponent {
       props || this.props;
     return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
   }
+
   /**
    * 判断是否是http链接.返回 Link 或 a
    * Judge whether it is http link.return a or Link
@@ -114,15 +116,16 @@ export default class SiderMenu extends PureComponent {
         </a>
       );
     }
+    const { pathname, isMobile, onCollapse } = this.props;
     return (
       <Link
         to={itemPath}
         target={target}
-        replace={itemPath === this.state.pathname}
+        replace={itemPath === pathname}
         onClick={
-          this.props.isMobile
+          isMobile
             ? () => {
-                this.props.onCollapse(true);
+                onCollapse(true);
               }
             : undefined
         }
@@ -132,6 +135,7 @@ export default class SiderMenu extends PureComponent {
       </Link>
     );
   };
+
   /**
    * get SubMenu or Item
    */
@@ -163,6 +167,7 @@ export default class SiderMenu extends PureComponent {
       return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
     }
   };
+
   /**
    * 获得菜单子节点
    * @memberof SiderMenu
@@ -180,6 +185,7 @@ export default class SiderMenu extends PureComponent {
       })
       .filter(item => item);
   };
+
   // Get the currently selected menu
   getSelectedMenuKeys = () => {
     const {
@@ -187,6 +193,7 @@ export default class SiderMenu extends PureComponent {
     } = this.props;
     return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
   };
+
   // conversion Path
   // 转化路径
   conversionPath = path => {
@@ -196,28 +203,34 @@ export default class SiderMenu extends PureComponent {
       return `/${path || ''}`.replace(/\/+/g, '/');
     }
   };
+
   // permission to check
   checkPermissionItem = (authority, ItemDom) => {
-    if (this.props.Authorized && this.props.Authorized.check) {
-      const { check } = this.props.Authorized;
+    const { Authorized } = this.props;
+    if (Authorized && Authorized.check) {
+      const { check } = Authorized;
       return check(authority, ItemDom);
     }
     return ItemDom;
   };
+
   isMainMenu = key => {
-    return this.props.menuData.some(item => {
+    const { menuData } = this.props;
+    return menuData.some(item => {
       if (key) {
         return item.key === key || item.path === key;
       }
       return false;
     });
   };
+
   handleOpenChange = openKeys => {
     const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
     this.setState({
       openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys],
     });
   };
+
   render() {
     const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
     const { openKeys } = this.state;

src/components/StandardTable/index.js

@@ -23,6 +23,7 @@ class StandardTable extends PureComponent {
       needTotalList,
     };
   }
+
   static getDerivedStateFromProps(nextProps) {
     // clean state
     if (nextProps.selectedRows.length === 0) {
@@ -34,8 +35,9 @@ class StandardTable extends PureComponent {
     }
     return null;
   }
+
   handleRowSelectChange = (selectedRowKeys, selectedRows) => {
-    let needTotalList = [...this.state.needTotalList];
+    let { needTotalList } = this.state;
     needTotalList = needTotalList.map(item => {
       return {
         ...item,
@@ -44,16 +46,19 @@ class StandardTable extends PureComponent {
         }, 0),
       };
     });
-
-    if (this.props.onSelectRow) {
-      this.props.onSelectRow(selectedRows);
+    const { onSelectRow } = this.props;
+    if (onSelectRow) {
+      onSelectRow(selectedRows);
     }
 
     this.setState({ selectedRowKeys, needTotalList });
   };
 
   handleTableChange = (pagination, filters, sorter) => {
-    this.props.onChange(pagination, filters, sorter);
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(pagination, filters, sorter);
+    }
   };
 
   cleanSelectedKeys = () => {

src/components/TagSelect/index.js

@@ -15,17 +15,14 @@ const TagSelectOption = ({ children, checked, onChange, value }) => (
 TagSelectOption.isTagSelectOption = true;
 
 class TagSelect extends Component {
-  state = {
-    expand: false,
-    value: this.props.value || this.props.defaultValue || [],
-  };
-
-  static getDerivedStateFromProps(nextProps) {
-    if ('value' in nextProps && nextProps.value) {
-      return { value: nextProps.value };
-    }
-    return null;
+  constructor(props) {
+    super(props);
+    this.state = {
+      expand: false,
+      value: props.value || props.defaultValue || [],
+    };
   }
+
   onChange = value => {
     const { onChange } = this.props;
     if (!('value' in this.props)) {
@@ -44,6 +41,13 @@ class TagSelect extends Component {
     this.onChange(checkedTags);
   };
 
+  static getDerivedStateFromProps(nextProps) {
+    if ('value' in nextProps && nextProps.value) {
+      return { value: nextProps.value };
+    }
+    return null;
+  }
+
   getAllTags() {
     let { children } = this.props;
     children = React.Children.toArray(children);
@@ -54,7 +58,8 @@ class TagSelect extends Component {
   }
 
   handleTagChange = (value, checked) => {
-    const checkedTags = [...this.state.value];
+    const { value: StateValue } = this.state;
+    const checkedTags = [...StateValue];
 
     const index = checkedTags.indexOf(value);
     if (checked && index === -1) {
@@ -66,8 +71,9 @@ class TagSelect extends Component {
   };
 
   handleExpand = () => {
+    const { expand } = this.state;
     this.setState({
-      expand: !this.state.expand,
+      expand: !expand,
     });
   };
 

src/layouts/BasicLayout.js

@@ -67,6 +67,7 @@ class BasicLayout extends React.PureComponent {
       breadcrumbNameMap: getBreadcrumbNameMap(menuData, routerData),
     };
   }
+
   getPageTitle() {
     const { routerData, location } = this.props;
     const { pathname } = location;
@@ -83,6 +84,7 @@ class BasicLayout extends React.PureComponent {
     }
     return title;
   }
+
   getLayoutStyle = () => {
     const { fixSiderbar, collapsed, layout } = this.props;
     if (fixSiderbar && layout !== 'topmenu') {
@@ -92,6 +94,7 @@ class BasicLayout extends React.PureComponent {
     }
     return null;
   };
+
   getContentStyle = () => {
     const { fixedHeader } = this.props;
     return {
@@ -99,6 +102,7 @@ class BasicLayout extends React.PureComponent {
       paddingTop: fixedHeader ? 64 : 0,
     };
   };
+
   getBashRedirect = () => {
     // According to the url parameter to redirect
     // 这里是重定向的,重定向到 url 的 redirect 参数所示地址
@@ -119,16 +123,25 @@ class BasicLayout extends React.PureComponent {
     }
     return redirect;
   };
+
   handleMenuCollapse = collapsed => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'global/changeLayoutCollapsed',
       payload: collapsed,
     });
   };
 
   render() {
-    const { isMobile, redirectData, routerData, match } = this.props;
-    const isTop = this.props.layout === 'topmenu';
+    const {
+      isMobile,
+      redirectData,
+      routerData,
+      silderTheme,
+      layout: PropsLayout,
+      match,
+    } = this.props;
+    const isTop = PropsLayout === 'topmenu';
     const bashRedirect = this.getBashRedirect();
     const myRedirectData = redirectData || [];
     const layout = (
@@ -137,7 +150,7 @@ class BasicLayout extends React.PureComponent {
           <SiderMenu
             logo={logo}
             Authorized={Authorized}
-            theme={this.props.silderTheme}
+            theme={silderTheme}
             onCollapse={this.handleMenuCollapse}
             {...this.props}
           />

src/layouts/Header.js

@@ -14,12 +14,15 @@ class HeaderView extends PureComponent {
   state = {
     visible: true,
   };
+
   componentDidMount() {
     document.getElementById('root').addEventListener('scroll', this.handScroll);
   }
+
   componentWillUnmount() {
     document.getElementById('root').removeEventListener('scroll', this.handScroll);
   }
+
   getHeadWidth = () => {
     const { isMobile, collapsed, setting } = this.props;
     const { fixedHeader, layout } = setting;
@@ -28,53 +31,62 @@ class HeaderView extends PureComponent {
     }
     return collapsed ? 'calc(100% - 80px)' : 'calc(100% - 256px)';
   };
+
   handleNoticeClear = type => {
     message.success(`清空了${type}`);
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'global/clearNotices',
       payload: type,
     });
   };
+
   handleMenuClick = ({ key }) => {
+    const { dispatch } = this.props;
     if (key === 'userCenter') {
-      this.props.dispatch(routerRedux.push('/account/center'));
+      dispatch(routerRedux.push('/account/center'));
       return;
     }
     if (key === 'triggerError') {
-      this.props.dispatch(routerRedux.push('/exception/trigger'));
+      dispatch(routerRedux.push('/exception/trigger'));
       return;
     }
     if (key === 'userinfo') {
-      this.props.dispatch(routerRedux.push('/account/settings/base'));
+      dispatch(routerRedux.push('/account/settings/base'));
       return;
     }
     if (key === 'logout') {
-      this.props.dispatch({
+      dispatch({
         type: 'login/logout',
       });
     }
   };
+
   handleNoticeVisibleChange = visible => {
     if (visible) {
-      this.props.dispatch({
+      const { dispatch } = this.props;
+      dispatch({
         type: 'global/fetchNotices',
       });
     }
   };
+
   handScroll = () => {
-    if (!this.props.autoHideHeader) {
+    const { autoHideHeader } = this.props;
+    const { visible } = this.state;
+    if (!autoHideHeader) {
       return;
     }
     const { scrollTop } = document.getElementById('root');
     if (!this.ticking) {
       this.ticking = false;
       requestAnimationFrame(() => {
-        if (scrollTop > 400 && this.state.visible) {
+        if (scrollTop > 400 && visible) {
           this.setState({
             visible: false,
           });
         }
-        if (scrollTop < 400 && !this.state.visible) {
+        if (scrollTop < 400 && !visible) {
           this.setState({
             visible: true,
           });
@@ -83,11 +95,13 @@ class HeaderView extends PureComponent {
       });
     }
   };
+
   render() {
-    const { isMobile, handleMenuCollapse } = this.props;
-    const { silderTheme, layout, fixedHeader } = this.props.setting;
+    const { isMobile, handleMenuCollapse, setting } = this.props;
+    const { silderTheme, layout, fixedHeader } = setting;
+    const { visible } = this.state;
     const isTop = layout === 'topmenu';
-    const HeaderDom = this.state.visible ? (
+    const HeaderDom = visible ? (
       <Header
         style={{ padding: 0, width: this.getHeadWidth() }}
         className={fixedHeader ? styles.fixedHeader : ''}

src/layouts/UserLayout.js

@@ -41,6 +41,7 @@ class UserLayout extends React.PureComponent {
     }
     return title;
   }
+
   render() {
     const { routerData, match } = this.props;
     return (

src/routes/Account/Center.js

@@ -44,7 +44,7 @@ export default class Center extends PureComponent {
 
   componentDidMount() {
     const { dispatch } = this.props;
-    this.props.dispatch({
+    dispatch({
       type: 'user/fetchCurrent',
     });
     dispatch({
@@ -58,7 +58,7 @@ export default class Center extends PureComponent {
     });
   }
 
-  onTabChange = (key) => {
+  onTabChange = key => {
     this.setState({ key });
   };
 
@@ -66,11 +66,11 @@ export default class Center extends PureComponent {
     this.setState({ inputVisible: true }, () => this.input.focus());
   };
 
-  saveInputRef = (input) => {
+  saveInputRef = input => {
     this.input = input;
   };
 
-  handleInputChange = (e) => {
+  handleInputChange = e => {
     this.setState({ inputValue: e.target.value });
   };
 
@@ -78,14 +78,8 @@ export default class Center extends PureComponent {
     const { state } = this;
     const { inputValue } = state;
     let { newTags } = state;
-    if (
-      inputValue &&
-      newTags.filter(tag => tag.label === inputValue).length === 0
-    ) {
-      newTags = [
-        ...newTags,
-        { key: `new-${newTags.length}`, label: inputValue },
-      ];
+    if (inputValue && newTags.filter(tag => tag.label === inputValue).length === 0) {
+      newTags = [...newTags, { key: `new-${newTags.length}`, label: inputValue }];
     }
     this.setState({
       newTags,
@@ -101,9 +95,7 @@ export default class Center extends PureComponent {
         {text}
       </span>
     );
-    const ListContent = ({
-      data: { content, updatedAt, avatar, owner, href },
-    }) => (
+    const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
       <div className={stylesArticles.listContent}>
         <div className={stylesArticles.description}>{content}</div>
         <div className={stylesArticles.extra}>
@@ -132,10 +124,7 @@ export default class Center extends PureComponent {
           >
             <List.Item.Meta
               title={
-                <a
-                  className={stylesArticles.listItemMetaTitle}
-                  href={item.href}
-                >
+                <a className={stylesArticles.listItemMetaTitle} href={item.href}>
                   {item.title}
                 </a>
               }
@@ -158,29 +147,17 @@ export default class Center extends PureComponent {
     const itemMenu = (
       <Menu>
         <Menu.Item>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="http://www.alipay.com/"
-          >
+          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
             1st menu item
           </a>
         </Menu.Item>
         <Menu.Item>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="http://www.taobao.com/"
-          >
+          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
             2nd menu item
           </a>
         </Menu.Item>
         <Menu.Item>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="http://www.tmall.com/"
-          >
+          <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
             3d menu item
           </a>
         </Menu.Item>
@@ -225,10 +202,7 @@ export default class Center extends PureComponent {
                 </Dropdown>,
               ]}
             >
-              <Card.Meta
-                avatar={<Avatar size="small" src={item.avatar} />}
-                title={item.title}
-              />
+              <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
               <div className={stylesApplications.cardItemContent}>
                 <CardInfo
                   activeUser={formatWan(item.activeUser)}
@@ -257,10 +231,7 @@ export default class Center extends PureComponent {
               hoverable
               cover={<img alt={item.title} src={item.cover} />}
             >
-              <Card.Meta
-                title={<a href="#">{item.title}</a>}
-                description={item.subDescription}
-              />
+              <Card.Meta title={<a href="#">{item.title}</a>} description={item.subDescription} />
               <div className={stylesProjects.cardItemContent}>
                 <span>{moment(item.updatedAt).fromNow()}</span>
                 <div className={stylesProjects.avatarList}>
@@ -281,6 +252,7 @@ export default class Center extends PureComponent {
       />
     );
   };
+
   renderContent() {
     const { newTags, inputVisible, inputValue } = this.state;
     const {
@@ -335,9 +307,7 @@ export default class Center extends PureComponent {
         <Divider dashed />
         <div className={styles.tags}>
           <div className={styles.tagsTitle}>标签</div>
-          {currentUser.tags
-            .concat(newTags)
-            .map(item => <Tag key={item.key}>{item.label}</Tag>)}
+          {currentUser.tags.concat(newTags).map(item => <Tag key={item.key}>{item.label}</Tag>)}
           {inputVisible && (
             <Input
               ref={this.saveInputRef}
@@ -351,10 +321,7 @@ export default class Center extends PureComponent {
             />
           )}
           {!inputVisible && (
-            <Tag
-              onClick={this.showInput}
-              style={{ background: '#fff', borderStyle: 'dashed' }}
-            >
+            <Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
               <Icon type="plus" />
             </Tag>
           )}
@@ -378,6 +345,7 @@ export default class Center extends PureComponent {
       </div>
     );
   }
+
   render() {
     const {
       list: { list },
@@ -416,17 +384,13 @@ export default class Center extends PureComponent {
       application: this.renderApplications(list, listLoading),
       project: this.renderProjects(list, listLoading),
     };
-
+    const { key } = this.state;
     return (
       <GridContent>
         <div className={styles.userCenter}>
           <Row gutter={24}>
             <Col lg={7} md={24}>
-              <Card
-                bordered={false}
-                style={{ marginBottom: 24 }}
-                loading={currentUserLoading}
-              >
+              <Card bordered={false} style={{ marginBottom: 24 }} loading={currentUserLoading}>
                 {currentUser && Object.keys(currentUser).length
                   ? this.renderContent()
                   : 'loading...'}
@@ -439,7 +403,7 @@ export default class Center extends PureComponent {
                 tabList={operationTabList}
                 onTabChange={this.onTabChange}
               >
-                {contentMap[this.state.key]}
+                {contentMap[key]}
               </Card>
             </Col>
           </Row>

src/routes/Account/Center/Center.js

@@ -22,7 +22,7 @@ export default class Center extends PureComponent {
 
   componentDidMount() {
     const { dispatch } = this.props;
-    this.props.dispatch({
+    dispatch({
       type: 'user/fetchCurrent',
     });
     dispatch({

src/routes/Account/Settings/BaseView.js

@@ -49,26 +49,33 @@ export default class BaseView extends Component {
   componentDidMount() {
     this.setBaseInfo();
   }
+
   setBaseInfo = () => {
-    const { currentUser } = this.props;
-    Object.keys(this.props.form.getFieldsValue()).forEach(key => {
+    const { currentUser, form } = this.props;
+    Object.keys(form.getFieldsValue()).forEach(key => {
       const obj = {};
       obj[key] = currentUser[key] || null;
-      this.props.form.setFieldsValue(obj);
+      form.setFieldsValue(obj);
     });
   };
+
   getAvatarURL() {
-    if (this.props.currentUser.avatar) {
-      return this.props.currentUser.avatar;
+    const { currentUser } = this.props;
+    if (currentUser.avatar) {
+      return currentUser.avatar;
     }
     const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
     return url;
   }
+
   getViewDom = ref => {
     this.view = ref;
   };
+
   render() {
-    const { getFieldDecorator } = this.props.form;
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
     return (
       <div className={styles.baseView} ref={this.getViewDom}>
         <div className={styles.left}>

src/routes/Account/Settings/BindingView.js

@@ -24,6 +24,7 @@ export default class BindingView extends Component {
       },
     ];
   };
+
   render() {
     return (
       <Fragment>

src/routes/Account/Settings/GeographicView.js

@@ -20,24 +20,33 @@ const nullSlectItem = {
 })
 export default class GeographicView extends PureComponent {
   componentDidMount = () => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'geographic/fetchProvince',
     });
   };
+
   componentDidUpdate(props) {
-    if (!props.value && !!this.props.value && !!this.props.value.province) {
-      this.props.dispatch({
+    const { dispatch, value } = this.props;
+
+    if (!props.value && !!value && !!value.province) {
+      dispatch({
         type: 'geographic/fetchCity',
-        payload: this.props.value.province.key,
+        payload: value.province.key,
       });
     }
   }
+
   getProvinceOption() {
-    return this.getOption(this.props.province);
+    const { province } = this.props;
+    return this.getOption(province);
   }
+
   getCityOption = () => {
-    return this.getOption(this.props.city);
+    const { city } = this.props;
+    return this.getOption(city);
   };
+
   getOption = list => {
     if (!list || list.length < 1) {
       return (
@@ -54,22 +63,27 @@ export default class GeographicView extends PureComponent {
       );
     });
   };
+
   selectProvinceItem = item => {
-    this.props.dispatch({
+    const { dispatch, onChange } = this.props;
+    dispatch({
       type: 'geographic/fetchCity',
       payload: item.key,
     });
-    this.props.onChange({
+    onChange({
       province: item,
       city: nullSlectItem,
     });
   };
+
   selectCityItem = item => {
-    this.props.onChange({
-      province: this.props.value.province,
+    const { value, onChange } = this.props;
+    onChange({
+      province: value.province,
       city: item,
     });
   };
+
   conversionObject() {
     const { value } = this.props;
     if (!value) {
@@ -84,10 +98,12 @@ export default class GeographicView extends PureComponent {
       city: city || nullSlectItem,
     };
   }
+
   render() {
     const { province, city } = this.conversionObject();
+    const { isLoading } = this.props;
     return (
-      <Spin spinning={this.props.isLoading} wrapperClassName={styles.row}>
+      <Spin spinning={isLoading} wrapperClassName={styles.row}>
         <Select
           className={styles.item}
           value={province}

src/routes/Account/Settings/Info.js

@@ -29,6 +29,16 @@ export default class Info extends Component {
       mode: 'inline',
     };
   }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resize);
+    this.resize();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
   static getDerivedStateFromProps(props, state) {
     const { match, location } = props;
     let selectKey = location.pathname.replace(`${match.path}/`, '');
@@ -38,25 +48,24 @@ export default class Info extends Component {
     }
     return null;
   }
-  componentDidMount() {
-    window.addEventListener('resize', this.resize);
-    this.resize();
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-  }
+
   getmenu = () => {
     return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
   };
+
   getRightTitle = () => {
-    return menuMap[this.state.selectKey];
+    const { selectKey } = this.state;
+    return menuMap[selectKey];
   };
+
   selectKey = ({ key }) => {
-    this.props.dispatch(routerRedux.push(`/account/settings/${key}`));
+    const { dispatch } = this.props;
+    dispatch(routerRedux.push(`/account/settings/${key}`));
     this.setState({
       selectKey: key,
     });
   };
+
   resize = () => {
     if (!this.main) {
       return;
@@ -75,11 +84,13 @@ export default class Info extends Component {
       });
     });
   };
+
   render() {
     const { match, routerData, currentUser } = this.props;
     if (!currentUser.userid) {
       return '';
     }
+    const { mode, selectKey } = this.state;
     return (
       <GridContent>
         <div
@@ -89,11 +100,7 @@ export default class Info extends Component {
           }}
         >
           <div className={styles.leftmenu}>
-            <Menu
-              mode={this.state.mode}
-              selectedKeys={[this.state.selectKey]}
-              onClick={this.selectKey}
-            >
+            <Menu mode={mode} selectedKeys={[selectKey]} onClick={this.selectKey}>
               {this.getmenu()}
             </Menu>
           </div>

src/routes/Account/Settings/NotificationView.js

@@ -23,6 +23,7 @@ export default class NotificationView extends Component {
       },
     ];
   };
+
   render() {
     return (
       <Fragment>

src/routes/Account/Settings/SecurityView.js

@@ -37,6 +37,7 @@ export default class SecurityView extends Component {
       },
     ];
   };
+
   render() {
     return (
       <Fragment>

src/routes/Dashboard/Monitor.js

@@ -27,7 +27,8 @@ const havePermissionAsync = new Promise(resolve => {
 }))
 export default class Monitor extends PureComponent {
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'monitor/fetchTags',
     });
   }

src/routes/Exception/triggerException.js

@@ -10,21 +10,25 @@ export default class TriggerException extends PureComponent {
   state = {
     isloading: false,
   };
+
   triggerError = code => {
     this.setState({
       isloading: true,
     });
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'error/query',
       payload: {
         code,
       },
     });
   };
+
   render() {
+    const { isloading } = this.state;
     return (
       <Card>
-        <Spin spinning={this.state.isloading} wrapperClassName={styles.trigger}>
+        <Spin spinning={isloading} wrapperClassName={styles.trigger}>
           <Button type="danger" onClick={() => this.triggerError(401)}>
             触发401
           </Button>

src/routes/Forms/AdvancedForm.js

@@ -61,21 +61,26 @@ class AdvancedForm extends PureComponent {
   state = {
     width: '100%',
   };
+
   componentDidMount() {
     window.addEventListener('resize', this.resizeFooterToolbar, { passive: true });
   }
+
   componentWillUnmount() {
     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) {
+      const { width: stateWidth } = this.state;
+      if (stateWidth !== width) {
         this.setState({ width });
       }
     });
   };
+
   render() {
     const { form, dispatch, submitting } = this.props;
     const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form;
@@ -129,6 +134,7 @@ class AdvancedForm extends PureComponent {
         </span>
       );
     };
+    const { width } = this.state;
     return (
       <PageHeaderLayout
         title="高级表单"
@@ -285,7 +291,7 @@ class AdvancedForm extends PureComponent {
             initialValue: tableData,
           })(<TableForm />)}
         </Card>
-        <FooterToolbar style={{ width: this.state.width }}>
+        <FooterToolbar style={{ width }}>
           {getErrorInfo()}
           <Button type="primary" onClick={validate} loading={submitting}>
             提交

src/routes/Forms/BasicForm.js

@@ -26,19 +26,23 @@ const { TextArea } = Input;
 @Form.create()
 export default class BasicForms extends PureComponent {
   handleSubmit = e => {
+    const { dispatch, form } = this.props;
     e.preventDefault();
-    this.props.form.validateFieldsAndScroll((err, values) => {
+    form.validateFieldsAndScroll((err, values) => {
       if (!err) {
-        this.props.dispatch({
+        dispatch({
           type: 'form/submitRegularForm',
           payload: values,
         });
       }
     });
   };
+
   render() {
     const { submitting } = this.props;
-    const { getFieldDecorator, getFieldValue } = this.props.form;
+    const {
+      form: { getFieldDecorator, getFieldValue },
+    } = this.props;
 
     const formItemLayout = {
       labelCol: {

src/routes/Forms/StepForm/index.js

@@ -23,6 +23,7 @@ export default class StepForm extends PureComponent {
         return 0;
     }
   }
+
   render() {
     const { match, routerData, location } = this.props;
     return (

src/routes/Forms/TableForm.js

@@ -3,6 +3,10 @@ import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
 import styles from './style.less';
 
 export default class TableForm extends PureComponent {
+  index = 0;
+
+  cacheOriginData = {};
+
   constructor(props) {
     super(props);
 
@@ -21,14 +25,16 @@ export default class TableForm extends PureComponent {
     }
     return null;
   }
+
   getRowByKey(key, newData) {
-    return (newData || this.state.data).filter(item => item.key === key)[0];
+    const { data } = this.state;
+    return (newData || data).filter(item => item.key === key)[0];
   }
-  index = 0;
-  cacheOriginData = {};
+
   toggleEditable = (e, key) => {
     e.preventDefault();
-    const newData = this.state.data.map(item => ({ ...item }));
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
     const target = this.getRowByKey(key, newData);
     if (target) {
       // 进入编辑状态时保存原始数据
@@ -39,13 +45,30 @@ export default class TableForm extends PureComponent {
       this.setState({ data: newData });
     }
   };
+
+  newMember = () => {
+    this.index += 1;
+    this.setState({
+      editData: [
+        {
+          key: `NEW_TEMP_ID_${this.index}`,
+          workId: '',
+          name: '',
+          department: '',
+          editable: true,
+          isNew: true,
+        },
+      ],
+    });
+  };
+
   remove(key) {
-    const { editData } = this.state;
+    const { editData, data } = this.state;
+    const { onChange } = this.props;
     const editItem = editData.find(item => item.key === key);
     if (editItem && editItem.key) {
       // 如果存在缓存
       if (this.cacheOriginData[key]) {
-        const data = [...this.state.data];
         data.push(this.cacheOriginData[key]);
         this.setState(
           {
@@ -62,39 +85,24 @@ export default class TableForm extends PureComponent {
       });
       return;
     }
-    const newData = this.state.data.filter(item => item.key !== key);
+    const newData = data.filter(item => item.key !== key);
     this.setState({ data: newData });
-    this.props.onChange(newData);
-  }
-  newMember = () => {
-    this.index += 1;
-    this.setState({
-      editData: [
-        {
-          key: `NEW_TEMP_ID_${this.index}`,
-          workId: '',
-          name: '',
-          department: '',
-          editable: true,
-          isNew: true,
-        },
-      ],
-    });
-  };
-  handleKeyPress(e, key) {
-    if (e.key === 'Enter') {
-      this.saveRow(e, key);
-    }
+    onChange(newData);
   }
+
   handleFieldChange(e, fieldName, key) {
-    const newData = this.state.data.map(item => ({ ...item }));
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
     const target = this.getRowByKey(key, newData);
     if (target) {
       target[fieldName] = e.target.value;
       this.setState({ data: newData });
     }
   }
+
   saveRow(e, key) {
+    const { data } = this.state;
+    const { onChange } = this.props;
     e.persist();
     this.setState({
       loading: true,
@@ -115,16 +123,18 @@ export default class TableForm extends PureComponent {
       }
       delete target.isNew;
       this.toggleEditable(e, key);
-      this.props.onChange(this.state.data);
+      onChange(data);
       this.setState({
         loading: false,
       });
     }, 500);
   }
+
   cancel(e, key) {
+    const { data } = this.state;
     this.clickedCancel = true;
     e.preventDefault();
-    const newData = this.state.data.map(item => ({ ...item }));
+    const newData = data.map(item => ({ ...item }));
     const target = this.getRowByKey(key, newData);
     if (this.cacheOriginData[key]) {
       Object.assign(target, this.cacheOriginData[key]);
@@ -134,6 +144,7 @@ export default class TableForm extends PureComponent {
     this.setState({ data: newData });
     this.clickedCancel = false;
   }
+
   render() {
     const columns = [
       {
@@ -198,7 +209,8 @@ export default class TableForm extends PureComponent {
         title: '操作',
         key: 'action',
         render: (text, record) => {
-          if (!!record.editable && this.state.loading) {
+          const { loading } = this.state;
+          if (!!record.editable && loading) {
             return null;
           }
           if (record.editable) {
@@ -233,11 +245,12 @@ export default class TableForm extends PureComponent {
         },
       },
     ];
-    const dataSource = this.state.data.concat(this.state.editData);
+    const { data, editData, loading } = this.state;
+    const dataSource = data.concat(editData);
     return (
       <Fragment>
         <Table
-          loading={this.state.loading}
+          loading={loading}
           columns={columns}
           dataSource={dataSource}
           pagination={false}

src/routes/List/Applications.js

@@ -19,7 +19,8 @@ const FormItem = Form.Item;
 }))
 export default class FilterCardList extends PureComponent {
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'list/fetch',
       payload: {
         count: 8,
@@ -46,7 +47,11 @@ export default class FilterCardList extends PureComponent {
   };
 
   render() {
-    const { list: { list }, loading, form } = this.props;
+    const {
+      list: { list },
+      loading,
+      form,
+    } = this.props;
     const { getFieldDecorator } = form;
 
     const CardInfo = ({ activeUser, newUser }) => (

src/routes/List/Articles.js

@@ -30,7 +30,8 @@ export default class SearchList extends Component {
   };
 
   fetchMore = () => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'list/appendFetch',
       payload: {
         count: pageSize,
@@ -39,7 +40,11 @@ export default class SearchList extends Component {
   };
 
   render() {
-    const { form, list: { list }, loading } = this.props;
+    const {
+      form,
+      list: { list },
+      loading,
+    } = this.props;
     const { getFieldDecorator } = form;
 
     const owners = [

src/routes/List/BasicList.js

@@ -38,32 +38,37 @@ const { Search, TextArea } = Input;
 }))
 @Form.create()
 export default class BasicList extends PureComponent {
+  formLayout = {
+    labelCol: { span: 7 },
+    wrapperCol: { span: 13 },
+  };
+
   state = { visible: false, done: false };
 
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'list/fetch',
       payload: {
         count: 5,
       },
     });
   }
-  formLayout = {
-    labelCol: { span: 7 },
-    wrapperCol: { span: 13 },
-  };
+
   showModal = () => {
     this.setState({
       visible: true,
       current: undefined,
     });
   };
+
   showEditModal = item => {
     this.setState({
       visible: true,
       current: item,
     });
   };
+
   handleDone = () => {
     setTimeout(() => this.addBtn.blur(), 0);
     this.setState({
@@ -71,16 +76,19 @@ export default class BasicList extends PureComponent {
       visible: false,
     });
   };
+
   handleCancel = () => {
     setTimeout(() => this.addBtn.blur(), 0);
     this.setState({
       visible: false,
     });
   };
+
   handleSubmit = e => {
     e.preventDefault();
     const { dispatch, form } = this.props;
-    const id = this.state.current ? this.state.current.id : '';
+    const { current } = this.state;
+    const id = current ? current.id : '';
 
     setTimeout(() => this.addBtn.blur(), 0);
     form.validateFields((err, fieldsValue) => {
@@ -94,16 +102,23 @@ export default class BasicList extends PureComponent {
       });
     });
   };
+
   deleteItem = id => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'list/submit',
       payload: { id },
     });
   };
 
   render() {
-    const { list: { list }, loading } = this.props;
-    const { getFieldDecorator } = this.props.form;
+    const {
+      list: { list },
+      loading,
+    } = this.props;
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
     const { visible, done, current = {} } = this.state;
 
     const editAndDelete = (key, currentItem) => {
@@ -237,7 +252,6 @@ export default class BasicList extends PureComponent {
         </Form>
       );
     };
-
     return (
       <PageHeaderLayout>
         <div className={styles.standardList}>
@@ -308,7 +322,7 @@ export default class BasicList extends PureComponent {
           </Card>
         </div>
         <Modal
-          title={done ? null : `任务${this.state.current ? '编辑' : '添加'}`}
+          title={done ? null : `任务${current ? '编辑' : '添加'}`}
           className={styles.standardListForm}
           width={640}
           bodyStyle={done ? { padding: '72px 0' } : { padding: '28px 0 0' }}

src/routes/List/CardList.js

@@ -13,7 +13,8 @@ import styles from './CardList.less';
 }))
 export default class CardList extends PureComponent {
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'list/fetch',
       payload: {
         count: 8,
@@ -22,7 +23,10 @@ export default class CardList extends PureComponent {
   }
 
   render() {
-    const { list: { list }, loading } = this.props;
+    const {
+      list: { list },
+      loading,
+    } = this.props;
 
     const content = (
       <div className={styles.pageHeaderContent}>

src/routes/List/Projects.js

@@ -21,7 +21,8 @@ const FormItem = Form.Item;
 }))
 export default class CoverCardList extends PureComponent {
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'list/fetch',
       payload: {
         count: 8,
@@ -48,7 +49,11 @@ export default class CoverCardList extends PureComponent {
   };
 
   render() {
-    const { list: { list = [] }, loading, form } = this.props;
+    const {
+      list: { list = [] },
+      loading,
+      form,
+    } = this.props;
     const { getFieldDecorator } = form;
 
     const cardList = list ? (

src/routes/List/TableList.js

@@ -88,11 +88,13 @@ class UpdateForm extends PureComponent {
       wrapperCol: { span: 13 },
     };
   }
+
   handleNext = currentStep => {
     const { form, handleUpdate } = this.props;
+    const { formVals: oldValue } = this.state;
     form.validateFields((err, fieldsValue) => {
       if (err) return;
-      const formVals = { ...this.state.formVals, ...fieldsValue };
+      const formVals = { ...oldValue, ...fieldsValue };
       this.setState(
         {
           formVals,
@@ -101,22 +103,27 @@ class UpdateForm extends PureComponent {
           if (currentStep < 2) {
             this.forward();
           } else {
-            handleUpdate(this.state.formVals);
+            handleUpdate(formVals);
           }
         }
       );
     });
   };
+
   backward = () => {
+    const { currentStep } = this.state;
     this.setState({
-      currentStep: this.state.currentStep - 1,
+      currentStep: currentStep - 1,
     });
   };
+
   forward = () => {
+    const { currentStep } = this.state;
     this.setState({
-      currentStep: this.state.currentStep + 1,
+      currentStep: currentStep + 1,
     });
   };
+
   renderContent = (currentStep, formVals) => {
     const { form } = this.props;
     if (currentStep === 1) {
@@ -194,6 +201,7 @@ class UpdateForm extends PureComponent {
       </FormItem>,
     ];
   };
+
   renderFooter = currentStep => {
     const { handleUpdateModalVisible } = this.props;
     if (currentStep === 1) {
@@ -231,6 +239,7 @@ class UpdateForm extends PureComponent {
       </Button>,
     ];
   };
+
   render() {
     const { updateModalVisible, handleUpdateModalVisible } = this.props;
     const { currentStep, formVals } = this.state;
@@ -263,22 +272,6 @@ class UpdateForm extends PureComponent {
 }))
 @Form.create()
 export default class TableList extends PureComponent {
-  state = {
-    modalVisible: false,
-    updateModalVisible: false,
-    expandForm: false,
-    selectedRows: [],
-    formValues: {},
-    stepFormValues: {},
-  };
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/fetch',
-    });
-  }
-
   columns = [
     {
       title: '规则名称',
@@ -340,6 +333,22 @@ export default class TableList extends PureComponent {
     },
   ];
 
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    stepFormValues: {},
+  };
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'rule/fetch',
+    });
+  }
+
   handleStandardTableChange = (pagination, filtersArg, sorter) => {
     const { dispatch } = this.props;
     const { formValues } = this.state;
@@ -379,8 +388,9 @@ export default class TableList extends PureComponent {
   };
 
   toggleForm = () => {
+    const { expandForm } = this.state;
     this.setState({
-      expandForm: !this.state.expandForm,
+      expandForm: !expandForm,
     });
   };
 
@@ -452,7 +462,8 @@ export default class TableList extends PureComponent {
   };
 
   handleAdd = fields => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'rule/add',
       payload: {
         desc: fields.desc,
@@ -464,7 +475,8 @@ export default class TableList extends PureComponent {
   };
 
   handleUpdate = fields => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'rule/update',
       payload: {
         name: fields.name,
@@ -478,7 +490,9 @@ export default class TableList extends PureComponent {
   };
 
   renderSimpleForm() {
-    const { getFieldDecorator } = this.props.form;
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
     return (
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
@@ -516,7 +530,9 @@ export default class TableList extends PureComponent {
   }
 
   renderAdvancedForm() {
-    const { getFieldDecorator } = this.props.form;
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
     return (
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
@@ -588,11 +604,15 @@ export default class TableList extends PureComponent {
   }
 
   renderForm() {
-    return this.state.expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
+    const { expandForm } = this.state;
+    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
   }
 
   render() {
-    const { rule: { data }, loading } = this.props;
+    const {
+      rule: { data },
+      loading,
+    } = this.props;
     const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
     const menu = (
       <Menu onClick={this.handleMenuClick} selectedKeys={[]}>

src/routes/User/Login.js

@@ -27,22 +27,23 @@ export default class LoginPage extends Component {
         if (err) {
           reject(err);
         } else {
-          this.props
-            .dispatch({
-              type: 'login/getCaptcha',
-              payload: values.mobile,
-            })
+          const { dispatch } = this.props;
+          dispatch({
+            type: 'login/getCaptcha',
+            payload: values.mobile,
+          })
             .then(resolve)
             .catch(reject);
         }
       });
     });
   };
-  loginForm;
+
   handleSubmit = (err, values) => {
     const { type } = this.state;
     if (!err) {
-      this.props.dispatch({
+      const { dispatch } = this.props;
+      dispatch({
         type: 'login/login',
         payload: {
           ...values,
@@ -58,13 +59,15 @@ export default class LoginPage extends Component {
     });
   };
 
+  loginForm;
+
   renderMessage = content => {
     return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
   };
 
   render() {
     const { login, submitting } = this.props;
-    const { type } = this.state;
+    const { type, autoLogin } = this.state;
     return (
       <div className={styles.main}>
         <Login
@@ -92,7 +95,7 @@ export default class LoginPage extends Component {
             <Captcha name="captcha" countDown={120} onGetCaptcha={this.onGetCaptcha} />
           </Tab>
           <div>
-            <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
+            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
               自动登录
             </Checkbox>
             <a style={{ float: 'right' }} href="">

src/routes/User/Register.js

@@ -35,9 +35,10 @@ export default class Register extends Component {
   };
 
   componentDidUpdate() {
-    const account = this.props.form.getFieldValue('mail');
-    if (this.props.register.status === 'ok') {
-      this.props.dispatch(
+    const { form, register, dispatch } = this.props;
+    const account = form.getFieldValue('mail');
+    if (register.status === 'ok') {
+      dispatch(
         routerRedux.push({
           pathname: '/user/register-result',
           state: {
@@ -47,6 +48,7 @@ export default class Register extends Component {
       );
     }
   }
+
   componentWillUnmount() {
     clearInterval(this.interval);
   }
@@ -77,13 +79,15 @@ export default class Register extends Component {
 
   handleSubmit = e => {
     e.preventDefault();
-    this.props.form.validateFields({ force: true }, (err, values) => {
+    const { form, dispatch } = this.props;
+    form.validateFields({ force: true }, (err, values) => {
       if (!err) {
-        this.props.dispatch({
+        const { prefix } = this.state;
+        dispatch({
           type: 'register/submit',
           payload: {
             ...values,
-            prefix: this.state.prefix,
+            prefix,
           },
         });
       }
@@ -92,7 +96,8 @@ export default class Register extends Component {
 
   handleConfirmBlur = e => {
     const { value } = e.target;
-    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
+    const { confirmDirty } = this.state;
+    this.setState({ confirmDirty: confirmDirty || !!value });
   };
 
   checkConfirm = (rule, value, callback) => {
@@ -105,6 +110,7 @@ export default class Register extends Component {
   };
 
   checkPassword = (rule, value, callback) => {
+    const { visible, confirmDirty } = this.state;
     if (!value) {
       this.setState({
         help: '请输入密码！',
@@ -115,7 +121,7 @@ export default class Register extends Component {
       this.setState({
         help: '',
       });
-      if (!this.state.visible) {
+      if (!visible) {
         this.setState({
           visible: !!value,
         });
@@ -124,7 +130,7 @@ export default class Register extends Component {
         callback('error');
       } else {
         const { form } = this.props;
-        if (value && this.state.confirmDirty) {
+        if (value && confirmDirty) {
           form.validateFields(['confirm'], { force: true });
         }
         callback();
@@ -158,7 +164,7 @@ export default class Register extends Component {
   render() {
     const { form, submitting } = this.props;
     const { getFieldDecorator } = form;
-    const { count, prefix } = this.state;
+    const { count, prefix, help, visible } = this.state;
     return (
       <div className={styles.main}>
         <h3>注册</h3>
@@ -177,7 +183,7 @@ export default class Register extends Component {
               ],
             })(<Input size="large" placeholder="邮箱" />)}
           </FormItem>
-          <FormItem help={this.state.help}>
+          <FormItem help={help}>
             <Popover
               content={
                 <div style={{ padding: '4px 0' }}>
@@ -190,7 +196,7 @@ export default class Register extends Component {
               }
               overlayStyle={{ width: 240 }}
               placement="right"
-              visible={this.state.visible}
+              visible={visible}
             >
               {getFieldDecorator('password', {
                 rules: [

src/utils/Yuan.js

@@ -7,14 +7,18 @@ export default class Yuan extends React.PureComponent {
   componentDidMount() {
     this.rendertoHtml();
   }
+
   componentDidUpdate() {
     this.rendertoHtml();
   }
+
   rendertoHtml = () => {
+    const { children } = this.props;
     if (this.main) {
-      this.main.innerHTML = yuan(this.props.children);
+      this.main.innerHTML = yuan(children);
     }
   };
+
   render() {
     return (
       <span