From 072e30b255b2f9c0d313662aa772305a1113fdaa Mon Sep 17 00:00:00 2001 From: jim Date: Wed, 11 Apr 2018 11:23:20 +0800 Subject: [PATCH] change to react 16.3.0 --- src/components/Authorized/PromiseRender.js | 2 +- src/components/Charts/Pie/index.js | 14 ++--- src/components/Charts/Radar/index.js | 4 +- src/components/Charts/TagCloud/index.js | 6 +-- src/components/CountDown/index.js | 62 +++++++++++----------- src/components/Ellipsis/index.js | 4 +- src/components/Sidebar/index.js | 13 +++-- src/components/SiderMenu/SiderMenu.js | 59 ++++++++------------ src/components/SiderMenu/index.js | 24 ++++++++- src/components/StandardTable/index.js | 22 ++++---- src/components/TagSelect/index.js | 11 ++-- src/routes/Forms/TableForm.js | 16 +++--- src/routes/User/Register.js | 5 +- 13 files changed, 124 insertions(+), 118 deletions(-) diff --git a/src/components/Authorized/PromiseRender.js b/src/components/Authorized/PromiseRender.js index 02518ad5..db86efd6 100644 --- a/src/components/Authorized/PromiseRender.js +++ b/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); } diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js index 2e68fdc6..0d1c4aca 100644 --- a/src/components/Charts/Pie/index.js +++ b/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(); - } - ); + this.getLegendData(); } } - componentWillUnmount() { window.removeEventListener('resize', this.resize); this.resize.cancel(); diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js index 588d9824..1131ac22 100644 --- a/src/components/Charts/Radar/index.js +++ b/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(); } } diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js index 1c284ab7..2c45e05e 100644 --- a/src/components/Charts/TagCloud/index.js +++ b/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); } } diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js index 875fb1e2..ce769121 100644 --- a/src/components/CountDown/index.js +++ b/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,18 +47,10 @@ 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(); - } - ); + this.tick(); } } @@ -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 => ( // {moment(time).format('hh:mm:ss')} // ); diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js index 93c5c235..891c7203 100644 --- a/src/components/Ellipsis/index.js +++ b/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(); } } diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index c56e7f69..7822d2d1 100644 --- a/src/components/Sidebar/index.js +++ b/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 [ diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js index ce232107..1cfb1a9a 100644 --- a/src/components/SiderMenu/SiderMenu.js +++ b/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 {this.getMenuItemPath(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]; diff --git a/src/components/SiderMenu/index.js b/src/components/SiderMenu/index.js index 001d4872..d950d761 100644 --- a/src/components/SiderMenu/index.js +++ b/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 ? ( }} width="256px" > - + ) : ( - + ); diff --git a/src/components/StandardTable/index.js b/src/components/StandardTable/index.js index 281d60e6..ad3eb1ca 100644 --- a/src/components/StandardTable/index.js +++ b/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 => { diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js index 773b9c84..c4ea4955 100644 --- a/src/components/TagSelect/index.js +++ b/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)) { diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js index 0cc07fd1..a758d234 100644 --- a/src/routes/Forms/TableForm.js +++ b/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]; } diff --git a/src/routes/User/Register.js b/src/routes/User/Register.js index 2ebb41cf..93bb35fb 100644 --- a/src/routes/User/Register.js +++ b/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); } -- GitLab