change to react 16.3.0

src/components/Authorized/PromiseRender.js

@@ -8,7 +8,7 @@ export default class PromiseRender extends React.PureComponent {
   componentDidMount() {
     this.setRenderComponent(this.props);
   }
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     // new Props enter
     this.setRenderComponent(nextProps);
   }

src/components/Charts/Pie/index.js

@@ -22,21 +22,13 @@ export default class Pie extends Component {
     window.addEventListener('resize', this.resize);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+  componentDidUpdate(preProps) {
+    if (this.props.data !== preProps.data) {
       // because of charts data create when rendered
       // so there is a trick for get rendered time
-      this.setState(
-        {
-          legendData: [...this.state.legendData],
-        },
-        () => {
       this.getLegendData();
     }
-      );
   }
-  }
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.resize);
     this.resize.cancel();

src/components/Charts/Radar/index.js

@@ -17,8 +17,8 @@ export default class Radar extends Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+  componentDidUpdate(preProps) {
+    if (this.props.data !== preProps.data) {
       this.getLengendData();
     }
   }

src/components/Charts/TagCloud/index.js

@@ -26,9 +26,9 @@ class TagCloud extends Component {
     window.addEventListener('resize', this.resize);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data)) {
-      this.renderChart(nextProps);
+  componentDidUpdate(preProps) {
+    if (JSON.stringify(preProps.data) !== JSON.stringify(this.props.data)) {
+      this.renderChart(this.props);
     }
   }
 

src/components/CountDown/index.js

@@ -3,12 +3,40 @@ import React, { Component } from 'react';
 function fixedZero(val) {
   return val * 1 < 10 ? `0${val}` : val;
 }
+const initTime = props => {
+  let lastTime = 0;
+  let targetTime = 0;
+  try {
+    if (Object.prototype.toString.call(props.target) === '[object Date]') {
+      targetTime = props.target.getTime();
+    } else {
+      targetTime = new Date(props.target).getTime();
+    }
+  } catch (e) {
+    throw new Error('invalid target prop', e);
+  }
+
+  lastTime = targetTime - new Date().getTime();
+  return {
+    lastTime: lastTime < 0 ? 0 : lastTime,
+  };
+};
 
 class CountDown extends Component {
+  static getDerivedStateFromProps(nextProps, preState) {
+    const { lastTime } = initTime(nextProps);
+    if (preState.lastTime !== lastTime) {
+      return {
+        lastTime,
+      };
+    }
+    return null;
+  }
+
   constructor(props) {
     super(props);
 
-    const { lastTime } = this.initTime(props);
+    const { lastTime } = initTime(props);
 
     this.state = {
       lastTime,
@@ -19,19 +47,11 @@ class CountDown extends Component {
     this.tick();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.target !== nextProps.target) {
+  componentDidUpdate(prevProps) {
+    if (this.props.target !== prevProps.target) {
       clearTimeout(this.timer);
-      const { lastTime } = this.initTime(nextProps);
-      this.setState(
-        {
-          lastTime,
-        },
-        () => {
       this.tick();
     }
-      );
-    }
   }
 
   componentWillUnmount() {
@@ -40,24 +60,6 @@ class CountDown extends Component {
 
   timer = 0;
   interval = 1000;
-  initTime = props => {
-    let lastTime = 0;
-    let targetTime = 0;
-    try {
-      if (Object.prototype.toString.call(props.target) === '[object Date]') {
-        targetTime = props.target.getTime();
-      } else {
-        targetTime = new Date(props.target).getTime();
-      }
-    } catch (e) {
-      throw new Error('invalid target prop', e);
-    }
-
-    lastTime = targetTime - new Date().getTime();
-    return {
-      lastTime: lastTime < 0 ? 0 : lastTime,
-    };
-  };
   // defaultFormat = time => (
   //  <span>{moment(time).format('hh:mm:ss')}</span>
   // );

src/components/Ellipsis/index.js

@@ -54,8 +54,8 @@ export default class Ellipsis extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.lines !== nextProps.lines) {
+  componentDidUpdate(perProps) {
+    if (this.props.lines !== perProps.lines) {
       this.computeLine();
     }
   }

src/components/Sidebar/index.js

@@ -32,6 +32,15 @@ const Body = ({ children, title, style }) => (
 );
 
 class Sidebar extends PureComponent {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const nextState = {};
+    Object.keys(nextProps).forEach(key => {
+      if (nextProps[key] && prevState[key] !== undefined) {
+        nextState[key] = nextProps[key];
+      }
+    });
+    return nextState;
+  }
   constructor(props) {
     super(props);
     this.defaultstate = {
@@ -48,9 +57,7 @@ class Sidebar extends PureComponent {
     const propsState = this.propsToState(props);
     this.state = { ...this.defaultstate, ...propsState };
   }
-  componentWillReceiveProps(props) {
-    this.setState(this.propsToState(props));
-  }
+
   getLayOutSetting = () => {
     const { layout } = this.state;
     return [

src/components/SiderMenu/SiderMenu.js

@@ -8,6 +8,19 @@ import { urlToList } from '../_utils/pathTools';
 const { Sider } = Layout;
 const { SubMenu } = Menu;
 
+/**
+ * 获得菜单子节点
+ * @memberof SiderMenu
+ */
+const getDefaultCollapsedSubMenus = props => {
+  const { location: { pathname } } = props;
+  return urlToList(pathname)
+    .map(item => {
+      return getMenuMatches(props.flatMenuKeys, item)[0];
+    })
+    .filter(item => item);
+};
+
 // Allow menu.js config icon as string or ReactNode
 //   icon: 'setting',
 //   icon: 'http://demo.com/icon.png',
@@ -23,36 +36,18 @@ const getIcon = icon => {
 };
 
 export default class SiderMenu extends PureComponent {
+  static getDerivedStateFromProps(nextProps) {
+    return {
+      openKeys: getDefaultCollapsedSubMenus(nextProps),
+    };
+  }
   constructor(props) {
     super(props);
-    this.menus = props.menuData;
-    this.flatMenuKeys = this.getFlatMenuKeys(props.menuData);
     this.state = {
-      openKeys: this.getDefaultCollapsedSubMenus(props),
+      openKeys: getDefaultCollapsedSubMenus(props),
     };
   }
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.location.pathname !== this.props.location.pathname) {
-      this.setState({
-        openKeys: this.getDefaultCollapsedSubMenus(nextProps),
-      });
-    }
-  }
-  /**
-   * Recursively flatten the data
-   * [{path:string},{path:string}] => {path,path2}
-   * @param  menus
-   */
-  getFlatMenuKeys(menus) {
-    let keys = [];
-    menus.forEach(item => {
-      if (item.children) {
-        keys = keys.concat(this.getFlatMenuKeys(item.children));
-      }
-      keys.push(item.path);
-    });
-    return keys;
-  }
+
   /**
    * Convert pathname to openKeys
    * /list/search/articles = > ['list','/list/search']
@@ -123,20 +118,8 @@ export default class SiderMenu extends PureComponent {
       return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
     }
   };
-  /**
-   * 获得菜单子节点
-   * @memberof SiderMenu
-   */
-  getDefaultCollapsedSubMenus(props) {
-    const { location: { pathname } } = props || this.props;
-    return urlToList(pathname)
-      .map(item => {
-        return getMenuMatches(this.flatMenuKeys, item)[0];
-      })
-      .filter(item => item);
-  }
   isMainMenu = key => {
-    return this.menus.some(item => key && (item.key === key || item.path === key));
+    return this.props.menuData.some(item => key && (item.key === key || item.path === key));
   };
   handleOpenChange = openKeys => {
     const lastOpenKey = openKeys[openKeys.length - 1];

src/components/SiderMenu/index.js

@@ -3,6 +3,22 @@ import React from 'react';
 import DrawerMenu from 'rc-drawer-menu';
 import SiderMenu from './SiderMenu';
 
+/**
+ * Recursively flatten the data
+ * [{path:string},{path:string}] => {path,path2}
+ * @param  menus
+ */
+const getFlatMenuKeys = menuData => {
+  let keys = [];
+  menuData.forEach(item => {
+    if (item.children) {
+      keys = keys.concat(getFlatMenuKeys(item.children));
+    }
+    keys.push(item.path);
+  });
+  return keys;
+};
+
 export default props =>
   props.isMobile || props.fixSiderbar ? (
     <DrawerMenu
@@ -15,8 +31,12 @@ export default props =>
       }}
       width="256px"
     >
-      <SiderMenu {...props} collapsed={props.isMobile ? false : props.collapsed} />
+      <SiderMenu
+        {...props}
+        flatMenuKeys={getFlatMenuKeys(props.menuData)}
+        collapsed={props.isMobile ? false : props.collapsed}
+      />
     </DrawerMenu>
   ) : (
-    <SiderMenu {...props} />
+    <SiderMenu {...props} flatMenuKeys={getFlatMenuKeys(props.menuData)} />
   );

src/components/StandardTable/index.js

@@ -13,6 +13,17 @@ function initTotalList(columns) {
 }
 
 class StandardTable extends PureComponent {
+  static getDerivedStateFromProps(nextProps) {
+    // clean state
+    if (nextProps.selectedRows.length === 0) {
+      const needTotalList = initTotalList(nextProps.columns);
+      return {
+        selectedRowKeys: [],
+        needTotalList,
+      };
+    }
+    return null;
+  }
   constructor(props) {
     super(props);
     const { columns } = props;
@@ -24,17 +35,6 @@ class StandardTable extends PureComponent {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    // clean state
-    if (nextProps.selectedRows.length === 0) {
-      const needTotalList = initTotalList(nextProps.columns);
-      this.setState({
-        selectedRowKeys: [],
-        needTotalList,
-      });
-    }
-  }
-
   handleRowSelectChange = (selectedRowKeys, selectedRows) => {
     let needTotalList = [...this.state.needTotalList];
     needTotalList = needTotalList.map(item => {

src/components/TagSelect/index.js

@@ -15,16 +15,17 @@ const TagSelectOption = ({ children, checked, onChange, value }) => (
 TagSelectOption.isTagSelectOption = true;
 
 class TagSelect extends Component {
-  state = {
-    expand: false,
-    value: this.props.value || this.props.defaultValue || [],
-  };
-  componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(nextProps) {
     if ('value' in nextProps && nextProps.value) {
       this.setState({ value: nextProps.value });
     }
   }
 
+  state = {
+    expand: false,
+    value: this.props.value || this.props.defaultValue || [],
+  };
+
   onChange = value => {
     const { onChange } = this.props;
     if (!('value' in this.props)) {

src/routes/Forms/TableForm.js

@@ -3,6 +3,14 @@ import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
 import styles from './style.less';
 
 export default class TableForm extends PureComponent {
+  static getDerivedStateFromProps(nextProps) {
+    if ('value' in nextProps) {
+      return {
+        data: nextProps.value,
+      };
+    }
+    return null;
+  }
   constructor(props) {
     super(props);
 
@@ -11,13 +19,7 @@ export default class TableForm extends PureComponent {
       loading: false,
     };
   }
-  componentWillReceiveProps(nextProps) {
-    if ('value' in nextProps) {
-      this.setState({
-        data: nextProps.value,
-      });
-    }
-  }
+
   getRowByKey(key, newData) {
     return (newData || this.state.data).filter(item => item.key === key)[0];
   }

src/routes/User/Register.js

@@ -34,9 +34,9 @@ export default class Register extends Component {
     prefix: '86',
   };
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate() {
     const account = this.props.form.getFieldValue('mail');
-    if (nextProps.register.status === 'ok') {
+    if (this.props.register.status === 'ok') {
       this.props.dispatch(
         routerRedux.push({
           pathname: '/user/register-result',
@@ -47,7 +47,6 @@ export default class Register extends Component {
       );
     }
   }
-
   componentWillUnmount() {
     clearInterval(this.interval);
   }