diff --git a/src/components/Authorized/PromiseRender.js b/src/components/Authorized/PromiseRender.js
index 3d2794f..5034a99 100644
--- a/src/components/Authorized/PromiseRender.js
+++ b/src/components/Authorized/PromiseRender.js
@@ -25,21 +25,23 @@
   };
 
   async componentDidMount() {
-    this.props.promise
+    const {...propsData} =  this.props;
+      propsData.promise
       .then(() => {
         this.setState({
-          component: this.props.ok,
+          component: propsData.ok,
         });
       })
       .catch(() => {
         this.setState({
-          component: this.props.error,
+          component: propsData.error,
         });
       });
   }
 
   render() {
-    const C = this.state.component;
+    const {...stateData} =  this.state;
+    const C = stateData.component;
     return C ? (
       <C {...this.props} />
     ) : (
diff --git a/src/components/Charts/Area/index.js b/src/components/Charts/Area/index.js
index 01c62a1..98107c4 100644
--- a/src/components/Charts/Area/index.js
+++ b/src/components/Charts/Area/index.js
@@ -42,6 +42,14 @@
     window.removeEventListener('resize', this.resize);
   }
 
+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleRef = n => {
+    this.node = n;
+  };
+
   @Bind()
   @Debounce(200)
   resize() {
@@ -67,15 +75,7 @@
       });
     }
   }
-
-  handleRoot = n => {
-    this.root = n;
-  };
-
-  handleRef = n => {
-    this.node = n;
-  };
-
+  
   render() {
     const { height, title, forceFit = true, data, color, limitColor } = this.props;
 
diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index 645a36d..7456ea0 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -36,6 +36,14 @@
     window.removeEventListener('resize', this.resize);
   }
 
+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleRef = n => {
+    this.node = n;
+  };
+  
   @Bind()
   @Debounce(400)
   resize() {
@@ -63,14 +71,6 @@
     }
   }
 
-  handleRoot = n => {
-    this.root = n;
-  };
-
-  handleRef = n => {
-    this.node = n;
-  };
-
   render() {
     const {
       height,
diff --git a/src/components/Charts/ChartCard/index.js b/src/components/Charts/ChartCard/index.js
index 2801d92..0ef484a 100644
--- a/src/components/Charts/ChartCard/index.js
+++ b/src/components/Charts/ChartCard/index.js
@@ -45,7 +45,7 @@
           </div>
           {// eslint-disable-next-line
           total !== undefined && (
-            <div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />
+            <div className={styles.total}>{total}</div>
           )}
         </div>
       </div>
diff --git a/src/components/Charts/HeatMap/index.js b/src/components/Charts/HeatMap/index.js
index e36e716..a83c3c7 100644
--- a/src/components/Charts/HeatMap/index.js
+++ b/src/components/Charts/HeatMap/index.js
@@ -56,6 +56,7 @@
     reducedData.map((count, i) => ({ datetime, responseTime: i, count }));
 
   handlePlotClick = (dtStart, dtEnd, responseTime) => {
+    const {...propsData} = this.props
     const removedUnit = responseTime.slice(0, responseTime.indexOf('ms'));
     let min;
     let max;
@@ -66,7 +67,7 @@
       min = value - 100 < 0 ? 0 : value - 100;
       max = value;
     }
-    this.props.onClick({ start: dtStart, end: dtEnd }, { min, max });
+    propsData.onClick({ start: dtStart, end: dtEnd }, { min, max });
   };
 
   render() {
diff --git a/src/components/Charts/Line/index.js b/src/components/Charts/Line/index.js
index 9ac23da..54a985e 100644
--- a/src/components/Charts/Line/index.js
+++ b/src/components/Charts/Line/index.js
@@ -38,6 +38,14 @@
     window.removeEventListener('resize', this.resize);
   }
 
+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleRef = n => {
+    this.node = n;
+  };
+
   @Bind()
   @Debounce(200)
   resize() {
@@ -64,14 +72,6 @@
     }
   }
 
-  handleRoot = n => {
-    this.root = n;
-  };
-
-  handleRef = n => {
-    this.node = n;
-  };
-
   render() {
     const { height, title, forceFit = true, data } = this.props;
 
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 8c3938e..44c2c5a 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -42,12 +42,14 @@
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+    const {...propsData} = this.props;
+    const {...stateData} = this.state;
+    if (propsData.data !== nextProps.data) {
       // because of charts data create when rendered
       // so there is a trick for get rendered time
       this.setState(
         {
-          legendData: [...this.state.legendData],
+          legendData: [...stateData.legendData],
         },
         () => {
           this.getLengendData();
@@ -84,28 +86,6 @@
     });
   };
 
-  // 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;
   };
@@ -128,6 +108,29 @@
     });
   };
 
+// for window resize auto responsive legend
+@Bind()
+@Debounce(300)
+resize() {
+  const {...stateData} = this.state;
+  const { hasLegend } = this.props;
+  if (!hasLegend || !this.root) {
+    window.removeEventListener('resize', this.resize);
+    return;
+  }
+  if (this.root.parentNode.clientWidth <= 380) {
+    if (!stateData.legendBlock) {
+      this.setState({
+        legendBlock: true,
+      });
+    }
+  } else if (stateData.legendBlock) {
+    this.setState({
+      legendBlock: false,
+    });
+  }
+}
+
   render() {
     const {
       valueFormat,
@@ -151,11 +154,11 @@
       [styles.hasLegend]: !!hasLegend,
       [styles.legendBlock]: legendBlock,
     });
-
+    const {...propsData} = this.props;
     const defaultColors = colors;
-    let data = this.props.data || [];
-    let selected = this.props.selected || true;
-    let tooltip = this.props.tooltip || true;
+    let data = propsData.data || [];
+    let selected = propsData.selected || true;
+    let tooltip = propsData.tooltip || true;
     let formatColor;
 
     const scale = {
diff --git a/src/components/Charts/StackBar/index.js b/src/components/Charts/StackBar/index.js
index bdec13a..0180b0f 100644
--- a/src/components/Charts/StackBar/index.js
+++ b/src/components/Charts/StackBar/index.js
@@ -42,6 +42,14 @@
     window.removeEventListener('resize', this.resize);
   }
 
+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleRef = n => {
+    this.node = n;
+  };
+
   @Bind()
   @Debounce(200)
   resize() {
@@ -68,14 +76,6 @@
     }
   }
 
-  handleRoot = n => {
-    this.root = n;
-  };
-
-  handleRef = n => {
-    this.node = n;
-  };
-
   render() {
     const { height, title, forceFit = true, data, color, limitColor } = this.props;
 
diff --git a/src/components/Duration/Icon/index.js b/src/components/Duration/Icon/index.js
index 4d4bbd7..999350b 100644
--- a/src/components/Duration/Icon/index.js
+++ b/src/components/Duration/Icon/index.js
@@ -35,8 +35,9 @@
   };
 
   renderLoad() {
+    const {...stateData} = this.state;
     const { loading, className, onReload } = this.props;
-    if (!loading && this.state.innerLoading < 1) {
+    if (!loading && stateData.innerLoading < 1) {
       this.state.innerLoading = -1;
       return (
         <span className={className} onClick={onReload}>
@@ -45,7 +46,7 @@
         </span>
       );
     }
-    if (this.state.innerLoading < 0) {
+    if (stateData.innerLoading < 0) {
       this.state.innerLoading = 1;
       lodash.delay(() => this.setState({ innerLoading: 0 }), 1000);
     }
diff --git a/src/components/Duration/Panel/currentTimePanel.js b/src/components/Duration/Panel/currentTimePanel.js
index e063776..93b0e09 100644
--- a/src/components/Duration/Panel/currentTimePanel.js
+++ b/src/components/Duration/Panel/currentTimePanel.js
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
 class CurrentTimePanel extends PureComponent {
   state = {
diff --git a/src/components/Duration/Panel/index.js b/src/components/Duration/Panel/index.js
index a8a7565..56f20a3 100644
--- a/src/components/Duration/Panel/index.js
+++ b/src/components/Duration/Panel/index.js
@@ -178,15 +178,16 @@
   };
 
   handleTimeZone = (zone) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'global/changeTimezone',
       payload: zone,
     });
-    this.props.dispatch({
+    propsData.dispatch({
       type: 'trace/changeTimezone',
       payload: zone,
     });
-    this.select(this.props.selected);
+    this.select(propsData.selected);
   }
 
   select = newSelectedTime => {
diff --git a/src/components/Login/LoginItem.js b/src/components/Login/LoginItem.js
index 52d5a4a..364a71c 100644
--- a/src/components/Login/LoginItem.js
+++ b/src/components/Login/LoginItem.js
@@ -40,8 +40,10 @@
       }
 
       componentDidMount() {
-        if (this.context.updateActive) {
-          this.context.updateActive(this.props.name);
+        const {...contextData} = this.context;
+        const {...propsData} = this.props;
+        if (contextData.updateActive) {
+          contextData.updateActive(propsData.name);
         }
       }
 
@@ -51,9 +53,10 @@
 
       onGetCaptcha = () => {
         let count = 59;
+        const {...propsData} = this.props;
         this.setState({ count });
-        if (this.props.onGetCaptcha) {
-          this.props.onGetCaptcha();
+        if (propsData.onGetCaptcha) {
+          propsData.onGetCaptcha();
         }
         this.interval = setInterval(() => {
           count -= 1;
@@ -65,7 +68,8 @@
       };
 
       render() {
-        const { getFieldDecorator } = this.context.form;
+        const {...contextData} = this.context;
+        const { getFieldDecorator } = contextData.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 3d56eb7..a655339 100644
--- a/src/components/Login/LoginTab.js
+++ b/src/components/Login/LoginTab.js
@@ -42,8 +42,9 @@
   }
 
   componentWillMount() {
-    if (this.context.tabUtil) {
-      this.context.tabUtil.addTab(this.uniqueId);
+    const {...contextData} = this.context;
+    if (contextData.tabUtil) {
+      contextData.tabUtil.addTab(this.uniqueId);
     }
   }
 
diff --git a/src/components/Login/index.js b/src/components/Login/index.js
index 6e765f9..938b0d6 100644
--- a/src/components/Login/index.js
+++ b/src/components/Login/index.js
@@ -46,26 +46,28 @@
   };
 
   state = {
-    type: this.props.defaultActiveKey,
+    type: '',
     tabs: [],
     active: {},
   };
 
   getChildContext() {
+    const {...stateData} = this.state;
+    const {...propsData} = this.props;
     return {
       tabUtil: {
         addTab: (id) => {
           this.setState({
-            tabs: [...this.state.tabs, id],
+            tabs: [...stateData.tabs, id],
           });
         },
         removeTab: (id) => {
           this.setState({
-            tabs: this.state.tabs.filter(currentId => currentId !== id),
+            tabs: stateData.tabs.filter(currentId => currentId !== id),
           });
         },
       },
-      form: this.props.form,
+      form: propsData.form,
       updateActive: (activeItem) => {
         const { type, active } = this.state;
         if (active[type]) {
@@ -80,19 +82,26 @@
     };
   }
 
+  componentWillMount() {
+    const {...propsData} = this.props;
+    this.setState({ type: propsData.defaultActiveKey });
+  };
+
   onSwitch = (type) => {
+    const {...propsData} = this.props;
     this.setState({
       type,
     });
-    this.props.onTabChange(type);
+    propsData.onTabChange(type);
   };
 
   handleSubmit = (e) => {
     e.preventDefault();
+    const {...propsData} = this.props;
     const { active, type } = this.state;
     const activeFileds = active[type];
-    this.props.form.validateFields(activeFileds, { force: true }, (err, values) => {
-      this.props.onSubmit(err, values);
+    propsData.form.validateFields(activeFileds, { force: true }, (err, values) => {
+      propsData.onSubmit(err, values);
     });
   };
 
diff --git a/src/components/NoticeIcon/index.js b/src/components/NoticeIcon/index.js
index b3da0a7..3f1b0f1 100644
--- a/src/components/NoticeIcon/index.js
+++ b/src/components/NoticeIcon/index.js
@@ -54,12 +54,14 @@
   }
 
   onTabChange = (tabType) => {
+    const {...propsData} = this.props;
     this.setState({ tabType });
-    this.props.onTabChange(tabType);
+    propsData.onTabChange(tabType);
   }
 
   getNotificationBox() {
     const { children, loading, locale } = this.props;
+    const {...propsData} = this.props;
     if (!children) {
       return null;
     }
@@ -72,7 +74,7 @@
             {...child.props}
             data={child.props.list}
             onClick={item => this.onItemClick(item, child.props)}
-            onClear={() => this.props.onClear(child.props.title)}
+            onClear={() => propsData.onClear(child.props.title)}
             title={child.props.title}
             locale={locale}
           />
@@ -103,8 +105,9 @@
       return trigger;
     }
     const popoverProps = {};
+    const {...propsData} = this.props;
     if ('popupVisible' in this.props) {
-      popoverProps.visible = this.props.popupVisible;
+      popoverProps.visible = propsData.popupVisible;
     }
     return (
       <Popover
diff --git a/src/components/Page/Panel/index.js b/src/components/Page/Panel/index.js
index 30bdf07..a80d9ed 100644
--- a/src/components/Page/Panel/index.js
+++ b/src/components/Page/Panel/index.js
@@ -27,11 +27,12 @@
   }
 
   shouldComponentUpdate(nextProps) {
+    const {...propsData} = this.props;
     const { globalVariables, variables, onChange } = nextProps;
     if (!this.isRender(nextProps)) {
       return false;
     }
-    if (globalVariables !== this.props.globalVariables || variables !== this.props.variables) {
+    if (globalVariables !== propsData.globalVariables || variables !== propsData.variables) {
       onChange({ ...globalVariables, ...variables });
       return false;
     }
diff --git a/src/components/Page/Search/index.js b/src/components/Page/Search/index.js
index c47cabe..31ecfe4 100644
--- a/src/components/Page/Search/index.js
+++ b/src/components/Page/Search/index.js
@@ -36,14 +36,16 @@
   };
 
   componentDidMount() {
-    if (this.props.variables && Object.keys(this.props.variables).length > 0) {
-      this.originFetchServer('', this.props.value.key);
+    const {...propsData} = this.props;
+    if (propsData.variables && Object.keys(propsData.variables).length > 0) {
+      this.originFetchServer('', propsData.value.key);
     }
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.variables !== this.props.variables) {
-      this.originFetchServer('', this.props.value.key);
+    const {...propsData} = this.props;
+    if (prevProps.variables !== propsData.variables) {
+      this.originFetchServer('', propsData.value.key);
     }
   }
 
@@ -52,6 +54,7 @@
       return;
     }
     const { url, query, variables = {}, transform } = this.props;
+    const {...stateData} = this.state;
     this.lastFetchId += 1;
     const fetchId = this.lastFetchId;
     this.setState({ data: [], fetching: true });
@@ -71,41 +74,43 @@
       }
       const list = body.data[Object.keys(body.data)[0]];
       this.setState({ data: transform ? list.map(transform) : list, fetching: false });
-      if (this.state.data.length < 1) {
+      if (stateData.data.length < 1) {
         return;
       }
       if (!key) {
-        this.handleSelect(this.state.data[0]);
+        this.handleSelect(stateData.data[0]);
         return;
       }
-      const option = this.state.data.find(_ => _.key === key);
+      const option = stateData.data.find(_ => _.key === key);
       if (!option) {
-        this.handleSelect(this.state.data[0]);
+        this.handleSelect(stateData.data[0]);
       }
     });
   };
 
   handleSelect = value => {
     const { onSelect } = this.props;
-    const selected = this.state.data.find(_ => _.key === value.key);
+    const { ...stateData } = this.state;
+    const selected = stateData.data.find(_ => _.key === value.key);
     onSelect(selected);
   };
 
   render() {
     const { placeholder, value } = this.props;
+    const { ...stateData } = this.state;
     return (
       <Select
         showSearch
         style={{ width: 600 }}
         placeholder={placeholder}
-        notFoundContent={this.state.fetching ? <Spin size="small" /> : null}
+        notFoundContent={stateData.fetching ? <Spin size="small" /> : null}
         filterOption={false}
         labelInValue
         onSelect={this.handleSelect.bind(this)}
         onSearch={this.fetchServer}
         value={value}
       >
-        {this.state.data.map(_ => {
+        {stateData.data.map(_ => {
           return (
             <Option key={_.key} value={_.key}>
               {_.label}
diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index ca6ff3f..10229e7 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -52,7 +52,8 @@
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location.pathname !== this.props.location.pathname) {
+    const {...propsData} = this.props;
+    if (nextProps.location.pathname !== propsData.location.pathname) {
       this.setState({
         openKeys: this.getDefaultCollapsedSubMenus(nextProps),
       });
@@ -126,6 +127,7 @@
   * @memberof SiderMenu
   */
   getMenuItemPath = (item) => {
+    const {...propsData} = this.props;
     const itemPath = this.conversionPath(item.path);
     const icon = getIcon(item.icon);
     const { target, name } = item;
@@ -141,8 +143,8 @@
       <Link
         to={itemPath}
         target={target}
-        replace={itemPath === this.props.location.pathname}
-        onClick={() => this.props.onCollapse(true)}
+        replace={itemPath === propsData.location.pathname}
+        onClick={() => propsData.onCollapse(true)}
       >
         {icon}<span>{name}</span>
       </Link>
@@ -206,8 +208,9 @@
 
   // permission to check
   checkPermissionItem = (authority, ItemDom) => {
-    if (this.props.Authorized && this.props.Authorized.check) {
-      const { check } = this.props.Authorized;
+    const {...propsData} = this.props;
+    if (propsData.Authorized && propsData.Authorized.check) {
+      const { check } = propsData.Authorized;
       return check(
         authority,
         ItemDom
diff --git a/src/components/Topology/AppTopology.js b/src/components/Topology/AppTopology.js
index e3f944e..1568f69 100644
--- a/src/components/Topology/AppTopology.js
+++ b/src/components/Topology/AppTopology.js
@@ -90,7 +90,7 @@
     const layer = cy.cyCanvas();
     const canvas = layer.getCanvas();
     
-    cy.on('render cyCanvas.resize', (evt) => {
+    cy.on('render cyCanvas.resize', () => {
       const ctx = canvas.getContext('2d');
       layer.resetTransform(ctx);
       layer.clear(ctx);
diff --git a/src/components/TraceStack/index.js b/src/components/TraceStack/index.js
index a4bfd7e..53ecfbb 100644
--- a/src/components/TraceStack/index.js
+++ b/src/components/TraceStack/index.js
@@ -259,20 +259,22 @@
   }
 
   selectTimeline = (container, isOver) => {
-    if (this.state.container === container) {
+    const {...stateData} = this.state;
+    if (stateData.container === container) {
       return;
     }
     container.attr('class', isOver ? styles.backgroud : styles.backgroudHide);
   }
 
   showSpanModal = (span, position, container) => {
+    const {...stateData} = this.state;
     const { container: old } = this.state;
     if (old) {
       old.attr('class', styles.backgroudHide);
     }
     container.attr('class', styles.backgroudSelected);
     this.setState({
-      ...this.state,
+      ...stateData,
       span,
       key: 'tags',
       position,
@@ -282,29 +284,31 @@
 
   hideSpanModal = () => {
     const { container: old } = this.state;
+    const {...stateData} = this.state;
     if (old) {
       old.attr('class', styles.backgroudHide);
     }
     this.setState({
-      ...this.state,
+      ...stateData,
       span: {},
       container: undefined,
     });
   }
 
   resize = () => {
+    const {...stateData} = this.state;
     if (!this.axis) {
       return;
     }
-    this.state.width = this.axis.parentNode.clientWidth - 50;
-    if (!this.axis || this.state.width <= 0) {
+    this.setState({width:this.axis.parentNode.clientWidth - 50});
+    if (!this.axis || stateData.width <= 0) {
       return;
     }
     this.axis.innerHTML = '';
     this.duration.innerHTML = '';
     this.drawAxis();
     this.displayData();
-    this.setState({ ...this.state, span: {} });
+    this.setState({ ...stateData, span: {} });
   }
 
   renderTitle = (items) => {
@@ -400,7 +404,7 @@
         </DescriptionList>);
     }
     const { top, left, width } = position;
-
+    const {...stateData} = this.state;
     const toolTipStyle = { position: 'absolute', top: top + 86 };
     if (contentList.logs) {
       toolTipStyle.left = 0;
@@ -440,7 +444,7 @@
             style={toolTipStyle}
             extra={<Button type="primary" shape="circle" icon="close" ghost onClick={this.hideSpanModal} />}
           >
-            {contentList[this.state.key]}
+            {contentList[stateData.key]}
           </Card>
         ) : null}
       </div>
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index ead1f91..1ea9595 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -90,6 +90,7 @@
   }
 
   componentWillUpdate(nextProps) {
+    const {...propsData} = this.props;
     const { globalVariables: { duration }, isMonitor } = nextProps;
     if (!isMonitor) {
       return;
@@ -101,7 +102,7 @@
     if (duration === preDuration) {
       return;
     }
-    this.props.dispatch({
+    propsData.dispatch({
       type: 'global/fetchNotice',
       payload: { variables: { duration } },
     });
@@ -133,20 +134,23 @@
   }
 
   handleDurationToggle = () => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'global/changeDurationCollapsed',
-      payload: this.props.duration.collapsed,
+      payload: propsData.duration.collapsed,
     });
   }
 
   handleDurationReload = () => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'global/reloadDuration',
     });
   }
 
   handleDurationSelected = (selectedDuration) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'global/changeDuration',
       payload: selectedDuration,
     });
@@ -161,27 +165,30 @@
   }
 
   handleMenuCollapse = (collapsed) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'global/changeLayoutCollapsed',
       payload: collapsed,
     });
   }
 
   handleMenuClick = ({ key }) => {
+    const {...propsData} = this.props;
     if (key === 'triggerError') {
-      this.props.dispatch(routerRedux.push('/exception/trigger'));
+      propsData.dispatch(routerRedux.push('/exception/trigger'));
       return;
     }
     if (key === 'logout') {
-      this.props.dispatch({
+      propsData.dispatch({
         type: 'login/logout',
       });
     }
   }
 
   handleNoticeVisibleChange = (visible) => {
+    const {...propsData} = this.props;
     if (visible) {
-      this.props.dispatch({
+      propsData.dispatch({
         type: 'global/fetchNotices',
       });
     }
@@ -196,6 +203,7 @@
   }
 
   render() {
+    const {...propsData} = this.props;
     const {
       isMonitor, collapsed, fetching, notices, routerData, match, location, zone,
       duration: { selected: dSelected, collapsed: dCollapsed },
@@ -235,7 +243,7 @@
               onSelected={this.handleDurationSelected}
               collapsed={dCollapsed}
               zone={zone}
-              dispatch={this.props.dispatch}
+              dispatch={propsData.dispatch}
             />
           ) : null}
           <Content style={{ margin: '24px 24px 0', height: '100%' }}>
diff --git a/src/routes/Alarm/Alarm.js b/src/routes/Alarm/Alarm.js
index a5aa771..9da9e8a 100644
--- a/src/routes/Alarm/Alarm.js
+++ b/src/routes/Alarm/Alarm.js
@@ -44,9 +44,10 @@
 }))
 export default class Alarm extends PureComponent {
   componentDidMount() {
+    const {...propsData} = this.props;
     const { alarm: { variables: { values } } } = this.props;
     if (!values.scope) {
-      this.props.dispatch({
+      propsData.dispatch({
         type: 'alarm/saveVariables',
         payload: { values: {
           scope: 'Service',
@@ -57,7 +58,8 @@
   }
 
   handleSearch = (keyword) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'alarm/saveVariables',
       payload: { values: {
         keyword,
@@ -67,7 +69,8 @@
   }
 
   handlePageChange = (pag) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'alarm/saveVariables',
       payload: { values: {
         paging: {
@@ -80,7 +83,8 @@
   }
 
   changeScope = (scope) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'alarm/saveVariables',
       payload: { values: {
         scope,
@@ -90,8 +94,9 @@
   }
 
   handleChange = (variables) => {
+    const {...propsData} = this.props;
     const { paging = defaultPaging } = variables;
-    this.props.dispatch({
+    propsData.dispatch({
       type: 'alarm/fetchData',
       payload: { variables: { ...variables, paging }, reducer: funcMap[variables.scope] },
     });
@@ -138,11 +143,12 @@
         />
       </div>
     );
+    const {...propsData} = this.props;
     const { alarm: { variables: { values }, data } } = this.props;
     return (
       <Panel
         variables={values}
-        globalVariables={this.props.globalVariables}
+        globalVariables={propsData.globalVariables}
         onChange={this.handleChange}
       >
         <Card
diff --git a/src/routes/Endpoint/Endpoint.js b/src/routes/Endpoint/Endpoint.js
index 278b97b..49f07df 100644
--- a/src/routes/Endpoint/Endpoint.js
+++ b/src/routes/Endpoint/Endpoint.js
@@ -20,7 +20,7 @@
 import { connect } from 'dva';
 import { Row, Col, Form, Button, Icon, Select } from 'antd';
 import {
-  ChartCard, MiniArea, MiniBar, Sankey, Line, EndpointDeps,
+  ChartCard, MiniArea, MiniBar, Line, EndpointDeps,
 } from 'components/Charts';
 import { axisY, axisMY } from '../../utils/time';
 import { avgTS } from '../../utils/utils';
@@ -52,24 +52,27 @@
 })
 export default class Endpoint extends PureComponent {
   componentDidMount() {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'endpoint/initOptions',
-      payload: { variables: this.props.globalVariables, reducer: 'saveServiceInfo' },
+      payload: { variables: propsData.globalVariables, reducer: 'saveServiceInfo' },
     });
   }
 
   componentWillUpdate(nextProps) {
-    if (nextProps.globalVariables.duration === this.props.globalVariables.duration) {
+    const {...propsData} = this.props;
+    if (nextProps.globalVariables.duration === propsData.globalVariables.duration) {
       return;
     }
-    this.props.dispatch({
+    propsData.dispatch({
       type: 'endpoint/initOptions',
       payload: { variables: nextProps.globalVariables, reducer: 'saveServiceInfo' },
     });
   }
 
   handleServiceSelect = (selected) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'endpoint/save',
       payload: {
         variables: {
@@ -84,7 +87,8 @@
   }
 
   handleSelect = (selected) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'endpoint/save',
       payload: {
         variables: {
@@ -99,7 +103,8 @@
   }
 
   handleChange = (variables) => {
-    const { variables: { values } } = this.props.endpoint;
+    const {...propsData} = this.props;
+    const { variables: { values } } = propsData.endpoint;
     if (!values.serviceId) {
       return;
     }
@@ -107,7 +112,7 @@
     if (!endpointId) {
       return;
     }
-    this.props.dispatch({
+    propsData.dispatch({
       type: 'endpoint/fetchData',
       payload: { variables: {
         endpointId,
@@ -158,17 +163,18 @@
   edgeWith = edge => edge.cpm;
 
   renderPanel = () => {
+    const {...propsData} = this.props;
     const { endpoint, duration } = this.props;
     const { variables: { values }, data } = endpoint;
     const { getEndpointResponseTimeTrend, getEndpointThroughputTrend,
-      getEndpointSLATrend, getEndpointTopology, queryBasicTraces } = data;
+      getEndpointSLATrend, queryBasicTraces } = data;
     if (!values.endpointId) {
       return null;
     }
     return (
       <Panel
         variables={data.endpointInfo}
-        globalVariables={this.props.globalVariables}
+        globalVariables={propsData.globalVariables}
         onChange={this.handleChange}
       >
         <Row gutter={8}>
@@ -216,7 +222,7 @@
             >
               <Line
                 height={150}
-                data={axisMY(this.props.duration, [{ title: 'p99', value: data.getP99}, { title: 'p95', value: data.getP95}
+                data={axisMY(propsData.duration, [{ title: 'p99', value: data.getP99}, { title: 'p95', value: data.getP95}
                 , { title: 'p90', value: data.getP90}, { title: 'p75', value: data.getP75}, { title: 'p50', value: data.getP50}])}
               />
             </ChartCard>
@@ -244,7 +250,7 @@
               <TraceList
                 data={queryBasicTraces.traces}
                 onClickTraceTag={this.handleShowTrace}
-                loading={this.props.loading}
+                loading={propsData.loading}
               />
             </ChartCard>
           </Col>
diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
index ce4c149..9378a95 100644
--- a/src/routes/Service/Service.js
+++ b/src/routes/Service/Service.js
@@ -57,24 +57,27 @@
 })
 export default class Service extends PureComponent {
   componentDidMount() {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'service/initOptions',
-      payload: { variables: this.props.globalVariables },
+      payload: { variables: propsData.globalVariables },
     });
   }
 
   componentWillUpdate(nextProps) {
-    if (nextProps.globalVariables.duration === this.props.globalVariables.duration) {
+    const {...propsData} = this.props;
+    if (nextProps.globalVariables.duration === propsData.globalVariables.duration) {
       return;
     }
-    this.props.dispatch({
+    propsData.dispatch({
       type: 'service/initOptions',
       payload: { variables: nextProps.globalVariables },
     });
   }
 
   handleSelect = (selected) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'service/saveVariables',
       payload: {
         values: { serviceId: selected.key },
@@ -84,11 +87,12 @@
   }
 
   handleChange = (variables) => {
-    const { data: { serviceInstanceInfo, showServiceInstance } } = this.props.service;
+    const {...propsData} = this.props;
+    const { data: { serviceInstanceInfo, showServiceInstance } } = propsData.service;
     if (showServiceInstance) {
       this.handleSelectServiceInstance(serviceInstanceInfo.key, serviceInstanceInfo);
     } else {
-      this.props.dispatch({
+      propsData.dispatch({
         type: 'service/fetchData',
         payload: { variables, reducer: 'saveService' },
       });
@@ -96,28 +100,32 @@
   }
 
   handleGoService = () => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'service/hideServiceInstance',
     });
   }
 
   handleGoServiceInstance = () => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'service/showServiceInstance',
     });
   }
 
   handleSelectServiceInstance = (serviceInstanceId, serviceInstanceInfo) => {
+    const {...propsData} = this.props;
     const { globalVariables: { duration } } = this.props;
-    this.props.dispatch({
+    propsData.dispatch({
       type: 'service/fetchServiceInstance',
       payload: { variables: { duration, serviceInstanceId }, serviceInstanceInfo },
     });
   }
 
   renderApp = () => {
-    const { getFieldDecorator } = this.props.form;
-    const { variables: { values, options, labels }, data } = this.props.service;
+    const {...propsData} = this.props;
+    const { getFieldDecorator } = propsData.form;
+    const { variables: { values, options, labels }, data } = propsData.service;
     return (
       <div>
         <Form layout="inline">
@@ -139,7 +147,7 @@
         </Form>
         <Panel
           variables={values}
-          globalVariables={this.props.globalVariables}
+          globalVariables={propsData.globalVariables}
           onChange={this.handleChange}
         >
           <Row gutter={0}>
@@ -168,7 +176,7 @@
                 <ServiceInstanceLitePanel
                   data={data}
                   serviceInstanceList={data.getServiceInstances}
-                  duration={this.props.duration}
+                  duration={propsData.duration}
                   onSelectServiceInstance={this.handleSelectServiceInstance}
                   onMoreServiceInstance={this.handleGoServiceInstance}
                 />
@@ -183,7 +191,7 @@
                 bodyStyle={{ padding: 5, height: 150}}
               >
                 <Line
-                  data={axisMY(this.props.duration, [{ title: 'p99', value: data.getP99}, { title: 'p95', value: data.getP95}
+                  data={axisMY(propsData.duration, [{ title: 'p99', value: data.getP99}, { title: 'p95', value: data.getP95}
                   , { title: 'p90', value: data.getP90}, { title: 'p75', value: data.getP75}, { title: 'p50', value: data.getP50}])}
                 />
               </Card>
@@ -212,7 +220,7 @@
                 <RankList
                   data={data.getSlowEndpoint}
                   renderValue={_ => `${_.value} ms`}
-                  onClick={(key, item) => redirect(this.props.history, '/monitor/endpoint', { key,
+                  onClick={(key, item) => redirect(propsData.history, '/monitor/endpoint', { key,
                     label: item.label,
                     serviceId: values.serviceId,
                     serviceName: labels.serviceId })}
@@ -226,7 +234,7 @@
   }
 
   render() {
-    const { service, duration } = this.props;
+    const { globalVariables, service, duration } = this.props;
     const { variables, data } = service;
     const { showServiceInstance, serviceInstanceInfo } = data;
     return (
@@ -244,7 +252,7 @@
             </Breadcrumb>
             <Panel
               variables={variables.values}
-              globalVariables={this.props.globalVariables}
+              globalVariables={globalVariables}
               onChange={this.handleChange}
             >
               <ServiceInstance data={data} duration={duration} />
diff --git a/src/routes/Topology/Topology.js b/src/routes/Topology/Topology.js
index 9b066df..a2c7948 100644
--- a/src/routes/Topology/Topology.js
+++ b/src/routes/Topology/Topology.js
@@ -155,20 +155,21 @@
   }
 
   renderActions = () => {
-    const { data: { appInfo } } = this.props.topology;
+    const {...propsData} = this.props;
+    const { data: { appInfo } } = propsData.topology;
     return [
-      <Icon type="appstore" onClick={() => redirect(this.props.history, '/monitor/service', { key: appInfo.id, label: appInfo.name })} />,
+      <Icon type="appstore" onClick={() => redirect(propsData.history, '/monitor/service', { key: appInfo.id, label: appInfo.name })} />,
       <Icon
         type="exception"
-        onClick={() => redirect(this.props.history, '/trace',
+        onClick={() => redirect(propsData.history, '/trace',
         { values: {
             serviceId: appInfo.id,
-            duration: { ...this.props.duration, input: this.props.globalVariables.duration },
+            duration: { ...propsData.duration, input: propsData.globalVariables.duration },
           },
           labels: { applicationId: appInfo.name },
         })}
       />,
-      appInfo.isAlarm ? <Icon type="bell" onClick={() => redirect(this.props.history, '/monitor/alarm')} /> : null,
+      appInfo.isAlarm ? <Icon type="bell" onClick={() => redirect(propsData.history, '/monitor/alarm')} /> : null,
     ];
   }
 
@@ -187,7 +188,8 @@
   }
 
   render() {
-    const { data, variables: { appRegExps, appFilters = [], latencyRange } } = this.props.topology;
+    const {...propsData} = this.props;
+    const { data, variables: { appRegExps, appFilters = [], latencyRange } } = propsData.topology;
     const { metrics, layout = 0 } = data;
     const { getGlobalTopology: topologData } = data;
     const content = (
@@ -198,7 +200,7 @@
       </div>
     );
     return (
-      <Panel globalVariables={this.props.globalVariables} onChange={this.handleChange}>
+      <Panel globalVariables={propsData.globalVariables} onChange={this.handleChange}>
         <Row gutter={8}>
           <Col {...{ ...colResponsiveProps, xl: 18, lg: 16 }}>
             <ChartCard
@@ -215,7 +217,7 @@
             >
               {topologData.nodes.length > 0 ? (
                 <AppTopology
-                  height={this.props.graphHeight}
+                  height={propsData.graphHeight}
                   elements={topologData}
                   metrics={metrics}
                   onSelectedApplication={this.handleSelectedApplication}
diff --git a/src/routes/Trace/Trace.js b/src/routes/Trace/Trace.js
index 6bfe06f..bbfdee8 100644
--- a/src/routes/Trace/Trace.js
+++ b/src/routes/Trace/Trace.js
@@ -29,13 +29,15 @@
 }))
 export default class Trace extends PureComponent {
   handleGoBack = () => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'trace/hideTimeline',
     });
   }
 
   render() {
     const { trace: { data: { showTimeline } } } = this.props;
+    const {...propsData} = this.props;
     return (
       <div>
         {showTimeline ? (
@@ -50,22 +52,22 @@
         <Row type="flex" justify="start">
           <Col span={showTimeline ? 0 : 24}>
             <TraceSearch
-              trace={this.props.trace}
-              duration={this.props.duration}
-              loading={this.props.loading}
-              globalVariables={this.props.globalVariables}
-              dispatch={this.props.dispatch}
-              zone={this.props.zone}
+              trace={propsData.trace}
+              duration={propsData.duration}
+              loading={propsData.loading}
+              globalVariables={propsData.globalVariables}
+              dispatch={propsData.dispatch}
+              zone={propsData.zone}
             />
           </Col>
           <Col span={showTimeline ? 24 : 0}>
             {showTimeline ? (
               <TraceTimeline
-                trace={this.props.trace}
-                duration={this.props.duration}
-                loading={this.props.loading}
-                globalVariables={this.props.globalVariables}
-                dispatch={this.props.dispatch}
+                trace={propsData.trace}
+                duration={propsData.duration}
+                loading={propsData.loading}
+                globalVariables={propsData.globalVariables}
+                dispatch={propsData.dispatch}
               />
             ) : null}
           </Col>
diff --git a/src/routes/Trace/TraceSearch.js b/src/routes/Trace/TraceSearch.js
index cb48a9b..59bbae7 100644
--- a/src/routes/Trace/TraceSearch.js
+++ b/src/routes/Trace/TraceSearch.js
@@ -53,9 +53,10 @@
 })
 export default class Trace extends PureComponent {
   componentDidMount() {
+    const {...propsData} = this.props;
     const { trace: { variables: { values } } } = this.props;
     const { duration } = values;
-    this.props.dispatch({
+    propsData.dispatch({
       type: 'trace/initOptions',
       payload: { variables: { duration: duration.input } },
     });
@@ -103,7 +104,8 @@
   }
 
   fetchData = (queryCondition, paging = initPaging) => {
-    this.props.dispatch({
+    const {...propsData} = this.props;
+    propsData.dispatch({
       type: 'trace/fetchData',
       payload: {
         variables: {
@@ -212,7 +214,8 @@
   }
 
   renderForm() {
-    const { getFieldDecorator } = this.props.form;
+    const {...propsData} = this.props;
+    const { getFieldDecorator } = propsData.form;
     const { trace: { variables: { options } }, zone } = this.props;
     return (
       <Form onSubmit={this.handleSearch} layout="vertical">
diff --git a/src/routes/User/Login.js b/src/routes/User/Login.js
index bd37e2a..e3aaed4 100644
--- a/src/routes/User/Login.js
+++ b/src/routes/User/Login.js
@@ -30,8 +30,9 @@
 }))
 export default class LoginPage extends Component {
   handleSubmit = (err, values) => {
+    const {...propsData} = this.props;
     if (!err) {
-      this.props.dispatch({
+      propsData.dispatch({
         type: 'login/login',
         payload: {
           ...values,
diff --git a/src/routes/User/Register.js b/src/routes/User/Register.js
index 87549fa..189abc0 100644
--- a/src/routes/User/Register.js
+++ b/src/routes/User/Register.js
@@ -53,9 +53,10 @@
   };
 
   componentWillReceiveProps(nextProps) {
-    const account = this.props.form.getFieldValue('mail');
+    const {...propsData} = this.props;
+    const account = propsData.form.getFieldValue('mail');
     if (nextProps.register.status === 'ok') {
-      this.props.dispatch(routerRedux.push({
+      propsData.dispatch(routerRedux.push({
         pathname: '/user/register-result',
         state: {
           account,
@@ -94,13 +95,15 @@
 
   handleSubmit = (e) => {
     e.preventDefault();
-    this.props.form.validateFields({ force: true }, (err, values) => {
+    const {...propsData} = this.props;
+    const {...stateData} = this.state;
+    propsData.form.validateFields({ force: true }, (err, values) => {
       if (!err) {
-        this.props.dispatch({
+        propsData.dispatch({
           type: 'register/submit',
           payload: {
             ...values,
-            prefix: this.state.prefix,
+            prefix: stateData.prefix,
           },
         });
       }
@@ -109,7 +112,8 @@
 
   handleConfirmBlur = (e) => {
     const { value } = e.target;
-    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
+    const {...stateData} = this.state;
+    this.setState({ confirmDirty: stateData.confirmDirty || !!value });
   };
 
   checkConfirm = (rule, value, callback) => {
@@ -122,6 +126,7 @@
   };
 
   checkPassword = (rule, value, callback) => {
+    const {...stateData} = this.state;
     if (!value) {
       this.setState({
         help: '请输入密码！',
@@ -132,7 +137,7 @@
       this.setState({
         help: '',
       });
-      if (!this.state.visible) {
+      if (!stateData.visible) {
         this.setState({
           visible: !!value,
         });
@@ -141,7 +146,7 @@
         callback('error');
       } else {
         const { form } = this.props;
-        if (value && this.state.confirmDirty) {
+        if (value && stateData.confirmDirty) {
           form.validateFields(['confirm'], { force: true });
         }
         callback();
@@ -175,7 +180,9 @@
   render() {
     const { form, submitting } = this.props;
     const { getFieldDecorator } = form;
-    const { count, prefix } = this.state;
+    const { help, count, prefix } = this.state;
+    const { stateData } = this.state;
+    
     return (
       <div className={styles.main}>
         <h3>注册</h3>
@@ -194,7 +201,7 @@
               ],
             })(<Input size="large" placeholder="邮箱" />)}
           </FormItem>
-          <FormItem help={this.state.help}>
+          <FormItem help={help}>
             <Popover
               content={
                 <div style={{ padding: '4px 0' }}>
@@ -207,7 +214,7 @@
               }
               overlayStyle={{ width: 240 }}
               placement="right"
-              visible={this.state.visible}
+              visible={stateData.visible}
             >
               {getFieldDecorator('password', {
                 rules: [