diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index a3c3608433cffd5d88ea1ee1e6b1890bc46e6e7f..87b4a8a1e0717afa24c96288ba5e982ede1d82c2 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -19,6 +19,14 @@ class Bar extends Component {
     window.removeEventListener('resize', this.resize);
   }
 
+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleRef = n => {
+    this.node = n;
+  };
+
   @Bind()
   @Debounce(400)
   resize() {
@@ -46,14 +54,6 @@ class Bar extends Component {
     }
   }
 
-  handleRoot = n => {
-    this.root = n;
-  };
-
-  handleRef = n => {
-    this.node = n;
-  };
-
   render() {
     const {
       height,
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 0d0dc3c5d174a2ddf374eeccd36d947bda94249f..a03017231d8519ba9480969a7c9314e385029fe4 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -25,12 +25,14 @@ export default class Pie extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+    const { data } = this.props;
+    if (data !== nextProps.data) {
       // because of charts data create when rendered
       // so there is a trick for get rendered time
+      const { legendData } = this.state;
       this.setState(
         {
-          legendData: [...this.state.legendData],
+          legendData: [...legendData],
         },
         () => {
           this.getLegendData();
@@ -67,28 +69,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;
   };
@@ -111,6 +91,29 @@ 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;
+    }
+    const { legendBlock } = this.state;
+    if (this.root.parentNode.clientWidth <= 380) {
+      if (!legendBlock) {
+        this.setState({
+          legendBlock: true,
+        });
+      }
+    } else if (legendBlock) {
+      this.setState({
+        legendBlock: false,
+      });
+    }
+  }
+
   render() {
     const {
       valueFormat,
@@ -135,10 +138,16 @@ export default class Pie extends Component {
       [styles.legendBlock]: legendBlock,
     });
 
+    const { data: d, selected: s, tooltip: t } = this.props;
+
+    let data = d || [];
+    let selected = s || true;
+    let tooltip = t || true;
+
     const defaultColors = colors;
-    let data = this.props.data || [];
-    let selected = this.props.selected || true;
-    let tooltip = this.props.tooltip || true;
+    // let data = this.props.data || [];
+    // let selected = this.props.selected || true;
+    // let tooltip = this.props.tooltip || true;
     let formatColor;
 
     const scale = {
diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js
index fc3ab4447e97bece6456bddb9fbb3ff5f1089b5b..c6203a7bc84c73df9a8d6e2f82cb6adb3bac006e 100644
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@@ -16,7 +16,8 @@ export default class Radar extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+    const { data } = this.props;
+    if (data !== nextProps.data) {
       this.getLengendData();
     }
   }
diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js
index 08418ea12dd8c034bd9af8dfe786ad2daa2c90c7..22af383849a430488bc0458c97400efe8924f3da 100644
--- a/src/components/Charts/TagCloud/index.js
+++ b/src/components/Charts/TagCloud/index.js
@@ -25,7 +25,8 @@ class TagCloud extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data)) {
+    const { data } = this.props;
+    if (JSON.stringify(nextProps.data) !== JSON.stringify(data)) {
       this.renderChart(nextProps);
     }
   }
diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js
index b67fab2f9d4a21cce05be763a1f5b445188b31e4..15e3cc48d63877266f2cdf2e4b3293d561c5c886 100644
--- a/src/components/CountDown/index.js
+++ b/src/components/CountDown/index.js
@@ -5,6 +5,10 @@ function fixedZero(val) {
 }
 
 class CountDown extends Component {
+  timer = 0;
+
+  interval = 1000;
+
   constructor(props) {
     super(props);
 
@@ -20,7 +24,8 @@ class CountDown extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.target !== nextProps.target) {
+    const { target } = this.props;
+    if (target !== nextProps.target) {
       clearTimeout(this.timer);
       const { lastTime } = this.initTime(nextProps);
       this.setState(
@@ -38,10 +43,6 @@ class CountDown extends Component {
     clearTimeout(this.timer);
   }
 
-  timer = 0;
-
-  interval = 1000;
-
   initTime = props => {
     let lastTime = 0;
     let targetTime = 0;
diff --git a/src/components/EditableItem/index.js b/src/components/EditableItem/index.js
index 5b22631c0e10c93f8a7f76aab29c32bc0d2a7550..272b711445ddf38a49e5aef44639ab4a8e3c8f0a 100644
--- a/src/components/EditableItem/index.js
+++ b/src/components/EditableItem/index.js
@@ -3,10 +3,13 @@ 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;
@@ -15,8 +18,10 @@ export default class EditableItem extends PureComponent {
 
   check = () => {
     this.setState({ editable: false });
-    if (this.props.onChange) {
-      this.props.onChange(this.state.value);
+    const { onChange } = this.props;
+    const { value } = this.state;
+    if (onChange) {
+      onChange(value);
     }
   };
 
diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js
index 8306b5d839878158ae93586293d7fc4902f4df0a..8cae96a545e840e2965c6092bb78d4eea76b4597 100644
--- a/src/components/Ellipsis/index.js
+++ b/src/components/Ellipsis/index.js
@@ -84,7 +84,8 @@ export default class Ellipsis extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.lines !== nextProps.lines) {
+    const { lines } = this.props;
+    if (lines !== nextProps.lines) {
       this.computeLine();
     }
   }
diff --git a/src/components/HeaderSearch/index.js b/src/components/HeaderSearch/index.js
index de8a6be51786b08e45c9c6528e7a7c5a758b2dd8..b67901fc3d554cdeea093ef8603188296c4e4bbe 100644
--- a/src/components/HeaderSearch/index.js
+++ b/src/components/HeaderSearch/index.js
@@ -27,10 +27,13 @@ export default class HeaderSearch extends PureComponent {
     defaultOpen: false,
   };
 
-  state = {
-    searchMode: this.props.defaultOpen,
-    value: '',
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchMode: props.defaultOpen,
+      value: '',
+    };
+  }
 
   onKeyDown = e => {
     if (e.key === 'Enter') {
@@ -40,24 +43,16 @@ export default class HeaderSearch extends PureComponent {
 
   onChange = value => {
     this.setState({ value });
-    if (this.props.onChange) {
-      this.props.onChange();
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange();
     }
   };
 
-  // NOTE: 不能小于500，如果长按某键，第一次触发auto repeat的间隔是500ms，小于500会导致触发2次
-  @Bind()
-  @Debounce(500, {
-    leading: true,
-    trailing: false,
-  })
-  debouncePressEnter() {
-    this.props.onPressEnter(this.state.value);
-  }
-
   enterSearchMode = () => {
     this.setState({ searchMode: true }, () => {
-      if (this.state.searchMode) {
+      const { searchMode } = this.state;
+      if (searchMode) {
         this.input.focus();
       }
     });
@@ -70,11 +65,24 @@ export default class HeaderSearch extends PureComponent {
     });
   };
 
+  debouncePressEnter() {
+    const { onPressEnter } = this.props;
+    const { value } = this.state;
+    onPressEnter(value);
+  }
+
+  // NOTE: 不能小于500，如果长按某键，第一次触发auto repeat的间隔是500ms，小于500会导致触发2次
+  @Bind()
+  @Debounce(500, {
+    leading: true,
+    trailing: false,
+  })
   render() {
     const { className, placeholder, ...restProps } = this.props;
+    const { searchMode, value } = this.state;
     delete restProps.defaultOpen; // for rc-select not affected
     const inputClass = classNames(styles.input, {
-      [styles.show]: this.state.searchMode,
+      [styles.show]: searchMode,
     });
     return (
       <span className={classNames(className, styles.headerSearch)} onClick={this.enterSearchMode}>
@@ -83,7 +91,7 @@ export default class HeaderSearch extends PureComponent {
           key="AutoComplete"
           {...restProps}
           className={inputClass}
-          value={this.state.value}
+          value={value}
           onChange={this.onChange}
         >
           <Input
diff --git a/src/components/Login/LoginItem.js b/src/components/Login/LoginItem.js
index a4504ad5436dc7fed6a3cfe4ccaa3019a892f951..2412ff017ec5dd60929abf305437ba09f930e030 100644
--- a/src/components/Login/LoginItem.js
+++ b/src/components/Login/LoginItem.js
@@ -23,8 +23,10 @@ function generator({ defaultProps, defaultRules, type }) {
       }
 
       componentDidMount() {
-        if (this.context.updateActive) {
-          this.context.updateActive(this.props.name);
+        const { updateActive } = this.context;
+        const { name } = this.props;
+        if (updateActive) {
+          updateActive(name);
         }
       }
 
@@ -35,8 +37,9 @@ function generator({ defaultProps, defaultRules, type }) {
       onGetCaptcha = () => {
         let count = 59;
         this.setState({ count });
-        if (this.props.onGetCaptcha) {
-          this.props.onGetCaptcha();
+        const { onGetCaptcha } = this.props;
+        if (onGetCaptcha) {
+          onGetCaptcha();
         }
         this.interval = setInterval(() => {
           count -= 1;
@@ -48,7 +51,8 @@ function generator({ defaultProps, defaultRules, type }) {
       };
 
       render() {
-        const { getFieldDecorator } = this.context.form;
+        const { form } = this.context;
+        const { getFieldDecorator } = form;
         const options = {};
         let otherProps = {};
         const { onChange, defaultValue, rules, name, ...restProps } = this.props;
diff --git a/src/components/Login/LoginTab.js b/src/components/Login/LoginTab.js
index 52de12d2e098ae03946c6a0a6b9f5f0f5cb5442d..73c9d7c9c2aab108e47e2f58a6a7733032d0c850 100644
--- a/src/components/Login/LoginTab.js
+++ b/src/components/Login/LoginTab.js
@@ -25,8 +25,9 @@ export default class LoginTab extends Component {
   }
 
   componentWillMount() {
-    if (this.context.tabUtil) {
-      this.context.tabUtil.addTab(this.uniqueId);
+    const { tabUtil } = this.context;
+    if (tabUtil) {
+      tabUtil.addTab(this.uniqueId);
     }
   }
 
diff --git a/src/components/Login/index.js b/src/components/Login/index.js
index 31235017cc4f260f204c36d92c71e43bb9d0ba4a..5f5d7d5c76817df3e4008cca5256ed2ede2bf71e 100644
--- a/src/components/Login/index.js
+++ b/src/components/Login/index.js
@@ -28,27 +28,32 @@ class Login extends Component {
     onSubmit: () => {},
   };
 
-  state = {
-    type: this.props.defaultActiveKey,
-    tabs: [],
-    active: {},
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      type: props.defaultActiveKey,
+      tabs: [],
+      active: {},
+    };
+  }
 
   getChildContext() {
+    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]) {
@@ -64,18 +69,20 @@ class Login extends Component {
   }
 
   onSwitch = type => {
+    const { onTabChange } = this.props;
     this.setState({
       type,
     });
-    this.props.onTabChange(type);
+    onTabChange(type);
   };
 
   handleSubmit = e => {
     e.preventDefault();
     const { active, type } = this.state;
+    const { form, onSubmit } = this.props;
     const activeFileds = active[type];
-    this.props.form.validateFields(activeFileds, { force: true }, (err, values) => {
-      this.props.onSubmit(err, values);
+    form.validateFields(activeFileds, { force: true }, (err, values) => {
+      onSubmit(err, values);
     });
   };
 
diff --git a/src/components/NoticeIcon/index.js b/src/components/NoticeIcon/index.js
index 5561f0ef73ddc8c7ccf5dc165062387ce46e80d0..3ea8213e615783ec075176b7e3a0df0ae814bb2a 100644
--- a/src/components/NoticeIcon/index.js
+++ b/src/components/NoticeIcon/index.js
@@ -37,11 +37,12 @@ export default class NoticeIcon extends PureComponent {
 
   onTabChange = tabType => {
     this.setState({ tabType });
-    this.props.onTabChange(tabType);
+    const { onTabChange } = this.state;
+    onTabChange(tabType);
   };
 
   getNotificationBox() {
-    const { children, loading, locale } = this.props;
+    const { children, loading, locale, onClear } = this.props;
     if (!children) {
       return null;
     }
@@ -56,7 +57,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}
           />
@@ -73,7 +74,7 @@ export default class NoticeIcon extends PureComponent {
   }
 
   render() {
-    const { className, count, popupAlign, onPopupVisibleChange } = this.props;
+    const { className, count, popupAlign, onPopupVisibleChange, popupVisible } = this.props;
     const noticeButtonClass = classNames(className, styles.noticeButton);
     const notificationBox = this.getNotificationBox();
     const trigger = (
@@ -88,7 +89,7 @@ export default class NoticeIcon extends PureComponent {
     }
     const popoverProps = {};
     if ('popupVisible' in this.props) {
-      popoverProps.visible = this.props.popupVisible;
+      popoverProps.visible = popupVisible;
     }
     return (
       <Popover
diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
index ac9f628c17539e675a22786b856f879db899c10c..8afc10247f1909a6f952659e645c5bf8b05278f8 100644
--- a/src/components/PageHeader/index.js
+++ b/src/components/PageHeader/index.js
@@ -36,23 +36,32 @@ 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;
+    const {
+      routes: croutes,
+      params: cparams,
+      location: clocation,
+      breadcrumbNameMap: cbreadcrumbNameMap,
+    } = this.context;
     return {
-      routes: this.props.routes || this.context.routes,
-      params: this.props.params || this.context.params,
-      routerLocation: this.props.location || this.context.location,
-      breadcrumbNameMap: this.props.breadcrumbNameMap || this.context.breadcrumbNameMap,
+      routes: routes || croutes,
+      params: params || cparams,
+      routerLocation: location || clocation,
+      breadcrumbNameMap: breadcrumbNameMap || cbreadcrumbNameMap,
     };
   };
 
@@ -185,6 +194,7 @@ export default class PageHeader extends PureComponent {
       tabDefaultActiveKey,
       tabBarExtraContent,
     } = this.props;
+    const { breadcrumb } = this.state;
 
     const clsString = classNames(styles.pageHeader, className);
     const activeKeyProps = {};
@@ -197,7 +207,7 @@ export default class PageHeader extends PureComponent {
 
     return (
       <div className={clsString}>
-        {this.state.breadcrumb}
+        {breadcrumb}
         <div className={styles.detail}>
           {logo && <div className={styles.logo}>{logo}</div>}
           <div className={styles.main}>
diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index fc93fca84aab6628987459586ccc7db745d2c306..aab2aaff68ef97647640a20863ac578524c34812 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -59,7 +59,8 @@ export default class SiderMenu extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location.pathname !== this.props.location.pathname) {
+    const { location } = this.props;
+    if (nextProps.location.pathname !== location.pathname) {
       this.setState({
         openKeys: this.getDefaultCollapsedSubMenus(nextProps),
       });
@@ -97,15 +98,16 @@ export default class SiderMenu 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
         }
@@ -186,8 +188,9 @@ export default class SiderMenu extends PureComponent {
 
   // 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;
diff --git a/src/components/SiderMenu/index.js b/src/components/SiderMenu/index.js
index a23459d5005493c85d1fd177375600b978e1ef7f..e1f060cf7104f23cd79d9f0470cfc3592bcc53a9 100644
--- a/src/components/SiderMenu/index.js
+++ b/src/components/SiderMenu/index.js
@@ -3,24 +3,26 @@ import React from 'react';
 import DrawerMenu from 'rc-drawer';
 import SiderMenu from './SiderMenu';
 
-const SiderMenuWrapper = props =>
-  props.isMobile ? (
+const SiderMenuWrapper = props => {
+  const { isMobile, collapsed } = props;
+  return isMobile ? (
     <DrawerMenu
       getContainer={null}
       level={null}
       handleChild={<i className="drawer-handle-icon" />}
       onHandleClick={() => {
-        props.onCollapse(!props.collapsed);
+        props.onCollapse(!collapsed);
       }}
-      open={!props.collapsed}
+      open={!collapsed}
       onMaskClick={() => {
         props.onCollapse(true);
       }}
     >
-      <SiderMenu {...props} collapsed={props.isMobile ? false : props.collapsed} />
+      <SiderMenu {...props} collapsed={isMobile ? false : collapsed} />
     </DrawerMenu>
   ) : (
     <SiderMenu {...props} />
   );
+};
 
 export default SiderMenuWrapper;
diff --git a/src/components/StandardTable/index.js b/src/components/StandardTable/index.js
index ea255cf80e63035e9d42ccadf9847a1aace76de0..c315346ea29ddfa0b117eece47dab9ca2695d20a 100644
--- a/src/components/StandardTable/index.js
+++ b/src/components/StandardTable/index.js
@@ -36,7 +36,9 @@ class StandardTable extends PureComponent {
   }
 
   handleRowSelectChange = (selectedRowKeys, selectedRows) => {
-    let needTotalList = [...this.state.needTotalList];
+    const { needTotalList: list } = this.state;
+    const { onSelectRow } = this.props;
+    let needTotalList = [...list];
     needTotalList = needTotalList.map(item => {
       return {
         ...item,
@@ -46,15 +48,16 @@ class StandardTable extends PureComponent {
       };
     });
 
-    if (this.props.onSelectRow) {
-      this.props.onSelectRow(selectedRows);
+    if (onSelectRow) {
+      onSelectRow(selectedRows);
     }
 
     this.setState({ selectedRowKeys, needTotalList });
   };
 
   handleTableChange = (pagination, filters, sorter) => {
-    this.props.onChange(pagination, filters, sorter);
+    const { onChange } = this.props;
+    onChange(pagination, filters, sorter);
   };
 
   cleanSelectedKeys = () => {
diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js
index d86425c120608a92a3b96a7af5e2cfa71bc24760..ffdd3eea8e4984a6295bf1f761b10b9fec9cf8fe 100644
--- a/src/components/TagSelect/index.js
+++ b/src/components/TagSelect/index.js
@@ -15,10 +15,13 @@ const TagSelectOption = ({ children, checked, onChange, value }) => (
 TagSelectOption.isTagSelectOption = true;
 
 class TagSelect extends Component {
-  state = {
-    expand: false,
-    value: this.props.value || this.props.defaultValue || [],
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      expand: false,
+      value: props.value || props.defaultValue || [],
+    };
+  }
 
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps && nextProps.value) {
@@ -54,7 +57,8 @@ class TagSelect extends Component {
   }
 
   handleTagChange = (value, checked) => {
-    const checkedTags = [...this.state.value];
+    const { value: v } = this.state;
+    const checkedTags = [...v];
 
     const index = checkedTags.indexOf(value);
     if (checked && index === -1) {
@@ -66,8 +70,9 @@ class TagSelect extends Component {
   };
 
   handleExpand = () => {
+    const { expand } = this.state;
     this.setState({
-      expand: !this.state.expand,
+      expand: !expand,
     });
   };
 
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index a6350edf651d0ebaa6bd8aa7add10e0ac3b8d5bc..a78235b5c6dc3f1ac54df831193ebb40803a965a 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -108,7 +108,8 @@ class BasicLayout extends React.PureComponent {
         isMobile: mobile,
       });
     });
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'user/fetchCurrent',
     });
   }
@@ -156,7 +157,8 @@ class BasicLayout extends React.PureComponent {
   };
 
   handleMenuCollapse = collapsed => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'global/changeLayoutCollapsed',
       payload: collapsed,
     });
@@ -164,27 +166,30 @@ class BasicLayout extends React.PureComponent {
 
   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 === 'triggerError') {
-      this.props.dispatch(routerRedux.push('/exception/trigger'));
+      dispatch(routerRedux.push('/exception/trigger'));
       return;
     }
     if (key === 'logout') {
-      this.props.dispatch({
+      dispatch({
         type: 'login/logout',
       });
     }
   };
 
   handleNoticeVisibleChange = visible => {
+    const { dispatch } = this.props;
     if (visible) {
-      this.props.dispatch({
+      dispatch({
         type: 'global/fetchNotices',
       });
     }
@@ -200,6 +205,7 @@ class BasicLayout extends React.PureComponent {
       match,
       location,
     } = this.props;
+    const { isMobile: mb } = this.state;
     const bashRedirect = this.getBaseRedirect();
     const layout = (
       <Layout>
@@ -212,7 +218,7 @@ class BasicLayout extends React.PureComponent {
           menuData={getMenuData()}
           collapsed={collapsed}
           location={location}
-          isMobile={this.state.isMobile}
+          isMobile={mb}
           onCollapse={this.handleMenuCollapse}
         />
         <Layout>
@@ -223,7 +229,7 @@ class BasicLayout extends React.PureComponent {
               fetchingNotices={fetchingNotices}
               notices={notices}
               collapsed={collapsed}
-              isMobile={this.state.isMobile}
+              isMobile={mb}
               onNoticeClear={this.handleNoticeClear}
               onCollapse={this.handleMenuCollapse}
               onMenuClick={this.handleMenuClick}
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index 617048998c8727d0be27671f979c6c757e8f379e..6ffb6df7c0d602f3ec57d6a09796be43f88b41b5 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -44,8 +44,8 @@ for (let i = 0; i < 7; i += 1) {
 
 const Yuan = ({ children }) => (
   <span
-    dangerouslySetInnerHTML={{ __html: yuan(children) }}
-  /> /* eslint-disable-line react/no-danger */
+    dangerouslySetInnerHTML={{ __html: yuan(children) }} /* eslint-disable-line react/no-danger */
+  />
 );
 
 @connect(({ chart, loading }) => ({
@@ -60,7 +60,8 @@ export default class Analysis extends Component {
   };
 
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'chart/fetch',
     });
   }
@@ -89,7 +90,8 @@ export default class Analysis extends Component {
       rangePickerValue,
     });
 
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'chart/fetchSalesData',
     });
   };
@@ -99,7 +101,8 @@ export default class Analysis extends Component {
       rangePickerValue: getTimeDistance(type),
     });
 
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'chart/fetchSalesData',
     });
   };
diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js
index 96fbfed05610138e7abaaa6b104690144427ce20..6d56a9410c856690c719fc09573bd8a66f2b3567 100644
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@@ -25,7 +25,8 @@ const havePermissionAsync = new Promise(resolve => {
 }))
 export default class Monitor extends PureComponent {
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'monitor/fetchTags',
     });
   }
diff --git a/src/routes/Exception/triggerException.js b/src/routes/Exception/triggerException.js
index 4699d4584b893f59b2b17b2f4ad815d7962ba6fe..3daab286cf65a0b29dcba2ef43749bb93e5d315d 100644
--- a/src/routes/Exception/triggerException.js
+++ b/src/routes/Exception/triggerException.js
@@ -15,7 +15,8 @@ export default class TriggerException extends PureComponent {
     this.setState({
       isloading: true,
     });
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'error/query',
       payload: {
         code,
@@ -24,9 +25,10 @@ export default class TriggerException extends PureComponent {
   };
 
   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>
diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js
index 741a37b101156285270968a099f48f793ebfff44..63faa6446ca18cbd86b2703ddb58fa3bf3002d9a 100644
--- a/src/routes/Forms/AdvancedForm.js
+++ b/src/routes/Forms/AdvancedForm.js
@@ -73,12 +73,14 @@ class AdvancedForm extends PureComponent {
   resizeFooterToolbar = () => {
     const sider = document.querySelectorAll('.ant-layout-sider')[0];
     const width = `calc(100% - ${sider.style.width})`;
-    if (this.state.width !== width) {
+    const { width: w } = this.state;
+    if (w !== width) {
       this.setState({ width });
     }
   };
 
   render() {
+    const { width: w } = this.state;
     const { form, dispatch, submitting } = this.props;
     const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form;
     const validate = () => {
@@ -287,7 +289,7 @@ class AdvancedForm extends PureComponent {
             initialValue: tableData,
           })(<TableForm />)}
         </Card>
-        <FooterToolbar style={{ width: this.state.width }}>
+        <FooterToolbar style={{ width: w }}>
           {getErrorInfo()}
           <Button type="primary" onClick={validate} loading={submitting}>
             提交
diff --git a/src/routes/Forms/BasicForm.js b/src/routes/Forms/BasicForm.js
index 7f5c7e0b517725fc1b61ddbb56cb3645785735c5..89d2732010cf9b7cea753bbfa7a39d24fae451a1 100644
--- a/src/routes/Forms/BasicForm.js
+++ b/src/routes/Forms/BasicForm.js
@@ -27,9 +27,10 @@ const { TextArea } = Input;
 export default class BasicForms extends PureComponent {
   handleSubmit = e => {
     e.preventDefault();
-    this.props.form.validateFieldsAndScroll((err, values) => {
+    const { form, dispatch } = this.props;
+    form.validateFieldsAndScroll((err, values) => {
       if (!err) {
-        this.props.dispatch({
+        dispatch({
           type: 'form/submitRegularForm',
           payload: values,
         });
@@ -38,8 +39,8 @@ export default class BasicForms extends PureComponent {
   };
 
   render() {
-    const { submitting } = this.props;
-    const { getFieldDecorator, getFieldValue } = this.props.form;
+    const { submitting, form } = this.props;
+    const { getFieldDecorator, getFieldValue } = form;
 
     const formItemLayout = {
       labelCol: {
diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js
index 65b679d584f8cdc8810e026bac53b54564f17975..4e5142cc86822164207f4297f09aceda3ab47622 100644
--- a/src/routes/Forms/TableForm.js
+++ b/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,16 +25,14 @@ export default class TableForm extends PureComponent {
   }
 
   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) {
       // 进入编辑状态时保存原始数据
@@ -42,14 +44,9 @@ export default class TableForm extends PureComponent {
     }
   };
 
-  remove(key) {
-    const newData = this.state.data.filter(item => item.key !== key);
-    this.setState({ data: newData });
-    this.props.onChange(newData);
-  }
-
   newMember = () => {
-    const newData = this.state.data.map(item => ({ ...item }));
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
     newData.push({
       key: `NEW_TEMP_ID_${this.index}`,
       workId: '',
@@ -62,6 +59,14 @@ export default class TableForm extends PureComponent {
     this.setState({ data: newData });
   };
 
+  remove(key) {
+    const { data } = this.state;
+    const { onChange } = this.props;
+    const newData = data.filter(item => item.key !== key);
+    this.setState({ data: newData });
+    onChange(newData);
+  }
+
   handleKeyPress(e, key) {
     if (e.key === 'Enter') {
       this.saveRow(e, key);
@@ -69,7 +74,8 @@ export default class TableForm extends PureComponent {
   }
 
   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;
@@ -96,9 +102,11 @@ export default class TableForm extends PureComponent {
         });
         return;
       }
+      const { data } = this.state;
+      const { onChange } = this.props;
       delete target.isNew;
       this.toggleEditable(e, key);
-      this.props.onChange(this.state.data);
+      onChange(data);
       this.setState({
         loading: false,
       });
@@ -108,7 +116,8 @@ export default class TableForm extends PureComponent {
   cancel(e, key) {
     this.clickedCancel = true;
     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 (this.cacheOriginData[key]) {
       Object.assign(target, this.cacheOriginData[key]);
@@ -183,7 +192,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) {
@@ -219,12 +229,14 @@ export default class TableForm extends PureComponent {
       },
     ];
 
+    const { loading, data } = this.state;
+
     return (
       <Fragment>
         <Table
-          loading={this.state.loading}
+          loading={loading}
           columns={columns}
-          dataSource={this.state.data}
+          dataSource={data}
           pagination={false}
           rowClassName={record => {
             return record.editable ? styles.editable : '';
diff --git a/src/routes/List/Applications.js b/src/routes/List/Applications.js
index 60a846f5d2a035d8ed0afc2703519113197a57c5..f563a595fd45e114cdd1a5c67b0b2f570657b7e0 100644
--- a/src/routes/List/Applications.js
+++ b/src/routes/List/Applications.js
@@ -36,7 +36,8 @@ const formatWan = val => {
 }))
 export default class FilterCardList extends PureComponent {
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'list/fetch',
       payload: {
         count: 8,
diff --git a/src/routes/List/Articles.js b/src/routes/List/Articles.js
index 405f8ec560c84395acef6f6d87d666bb575a460b..bca8f10b8d8e32093d454da77d951ae8eb8368e3 100644
--- a/src/routes/List/Articles.js
+++ b/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,
diff --git a/src/routes/List/BasicList.js b/src/routes/List/BasicList.js
index 155be87c2c26e888c2a585f2d18a471a1cf80a5c..0886aff12a422e298da7659de716bbd619a4411a 100644
--- a/src/routes/List/BasicList.js
+++ b/src/routes/List/BasicList.js
@@ -30,7 +30,8 @@ const { Search } = Input;
 }))
 export default class BasicList extends PureComponent {
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'list/fetch',
       payload: {
         count: 5,
diff --git a/src/routes/List/CardList.js b/src/routes/List/CardList.js
index 1441596ede3ef700bae3efdd4a1008f9a3909ce0..bf981bf05f6f832567266d424b41de72d6381d91 100644
--- a/src/routes/List/CardList.js
+++ b/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,
diff --git a/src/routes/List/Projects.js b/src/routes/List/Projects.js
index b17209729b73761f6891f71190cc751228719eaa..3ffba3582b5042c430b37320fc94b054ec107a00 100644
--- a/src/routes/List/Projects.js
+++ b/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,
diff --git a/src/routes/List/TableList.js b/src/routes/List/TableList.js
index fa8b6d129783377cc7fed76adea4641bd32bfffd..c84f1f3bb29f4dace518ab27df7da56ae52002c2 100644
--- a/src/routes/List/TableList.js
+++ b/src/routes/List/TableList.js
@@ -117,8 +117,9 @@ export default class TableList extends PureComponent {
   };
 
   toggleForm = () => {
+    const { expandForm } = this.state;
     this.setState({
-      expandForm: !this.state.expandForm,
+      expandForm: !expandForm,
     });
   };
 
@@ -184,7 +185,8 @@ export default class TableList extends PureComponent {
   };
 
   handleAdd = fields => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'rule/add',
       payload: {
         description: fields.desc,
@@ -198,7 +200,8 @@ export default class TableList extends PureComponent {
   };
 
   renderSimpleForm() {
-    const { getFieldDecorator } = this.props.form;
+    const { form } = this.props;
+    const { getFieldDecorator } = form;
     return (
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
@@ -236,7 +239,8 @@ export default class TableList extends PureComponent {
   }
 
   renderAdvancedForm() {
-    const { getFieldDecorator } = this.props.form;
+    const { form } = this.props;
+    const { getFieldDecorator } = form;
     return (
       <Form onSubmit={this.handleSearch} layout="inline">
         <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
@@ -308,7 +312,8 @@ 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() {
diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js
index 0df2beae879b680dda2622b44a83d00dd2c1ec6e..58b56fef732c3cca80ba94d27f3f13076fe5851c 100644
--- a/src/routes/Profile/AdvancedProfile.js
+++ b/src/routes/Profile/AdvancedProfile.js
@@ -226,7 +226,7 @@ export default class AdvancedProfile extends Component {
   }
 
   render() {
-    const { stepDirection } = this.state;
+    const { stepDirection, operationkey } = this.state;
     const { profile, loading } = this.props;
     const { advancedOperation1, advancedOperation2, advancedOperation3 } = profile;
     const contentList = {
@@ -343,7 +343,7 @@ export default class AdvancedProfile extends Component {
           tabList={operationTabList}
           onTabChange={this.onOperationTabChange}
         >
-          {contentList[this.state.operationkey]}
+          {contentList[operationkey]}
         </Card>
       </PageHeaderLayout>
     );
diff --git a/src/routes/User/Login.js b/src/routes/User/Login.js
index ab0d2834f8bf090db1cd3ea2ee93826fdec8ad16..6d0bd806677596ee9e76f269ae563fcd1553975e 100644
--- a/src/routes/User/Login.js
+++ b/src/routes/User/Login.js
@@ -23,8 +23,9 @@ export default class LoginPage extends Component {
 
   handleSubmit = (err, values) => {
     const { type } = this.state;
+    const { dispatch } = this.props;
     if (!err) {
-      this.props.dispatch({
+      dispatch({
         type: 'login/login',
         payload: {
           ...values,
@@ -46,7 +47,7 @@ export default class LoginPage extends Component {
 
   render() {
     const { login, submitting } = this.props;
-    const { type } = this.state;
+    const { type, autoLogin } = this.state;
     return (
       <div className={styles.main}>
         <Login defaultActiveKey={type} onTabChange={this.onTabChange} onSubmit={this.handleSubmit}>
@@ -67,7 +68,7 @@ export default class LoginPage extends Component {
             <Captcha name="captcha" />
           </Tab>
           <div>
-            <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
+            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
               自动登录
             </Checkbox>
             <a style={{ float: 'right' }} href="">
diff --git a/src/routes/User/Register.js b/src/routes/User/Register.js
index 2ebb41cf993d29cab1cee23ec3b086c9f85dcfba..680326dcea87f85e0d818bcff8973a1032a84ec1 100644
--- a/src/routes/User/Register.js
+++ b/src/routes/User/Register.js
@@ -35,9 +35,10 @@ export default class Register extends Component {
   };
 
   componentWillReceiveProps(nextProps) {
-    const account = this.props.form.getFieldValue('mail');
+    const { form, dispatch } = this.props;
+    const account = form.getFieldValue('mail');
     if (nextProps.register.status === 'ok') {
-      this.props.dispatch(
+      dispatch(
         routerRedux.push({
           pathname: '/user/register-result',
           state: {
@@ -78,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) => {
+      const { prefix } = this.state;
       if (!err) {
-        this.props.dispatch({
+        dispatch({
           type: 'register/submit',
           payload: {
             ...values,
-            prefix: this.state.prefix,
+            prefix,
           },
         });
       }
@@ -93,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) => {
@@ -116,7 +120,8 @@ export default class Register extends Component {
       this.setState({
         help: '',
       });
-      if (!this.state.visible) {
+      const { visible, confirmDirty } = this.state;
+      if (!visible) {
         this.setState({
           visible: !!value,
         });
@@ -125,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();
@@ -159,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>
@@ -178,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' }}>
@@ -191,7 +196,7 @@ export default class Register extends Component {
               }
               overlayStyle={{ width: 240 }}
               placement="right"
-              visible={this.state.visible}
+              visible={visible}
             >
               {getFieldDecorator('password', {
                 rules: [