From 388d804ec083aa648dc2f3d0f44c2d817fa0a32a Mon Sep 17 00:00:00 2001 From: jim Date: Wed, 25 Apr 2018 16:27:49 +0800 Subject: [PATCH] Maybe useful performance optimization --- src/components/ActiveChart/index.js | 23 +++++++++++----- src/components/Charts/Bar/index.js | 32 ++++++++++++---------- src/components/Charts/Pie/index.js | 35 ++++++++++++++---------- src/components/Charts/Radar/index.js | 4 ++- src/components/Charts/TagCloud/index.js | 10 +++++-- src/components/Charts/WaterWave/index.js | 17 +++++++----- src/routes/Account/Settings/Info.js | 22 ++++++++------- src/routes/Forms/AdvancedForm.js | 12 ++++---- src/routes/Profile/AdvancedProfile.js | 24 ++++++++-------- 9 files changed, 105 insertions(+), 74 deletions(-) diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js index cd6119b9..07e29619 100644 --- a/src/components/ActiveChart/index.js +++ b/src/components/ActiveChart/index.js @@ -26,17 +26,26 @@ export default class ActiveChart extends Component { }; componentDidMount() { - this.timer = setInterval(() => { - this.setState({ - activeData: getActiveData(), - }); - }, 1000); + this.loopData(); } componentWillUnmount() { - clearInterval(this.timer); + clearTimeout(this.timer); } - + loopData = () => { + this.timer = setTimeout(() => { + this.setState( + { + activeData: getActiveData(), + }, + () => { + requestAnimationFrame(() => { + this.loopData(); + }); + } + ); + }, 1000); + }; render() { const { activeData = [] } = this.state; diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js index a3c36084..1a2d5c70 100644 --- a/src/components/Charts/Bar/index.js +++ b/src/components/Charts/Bar/index.js @@ -25,25 +25,27 @@ class Bar extends Component { if (!this.node) { return; } - const canvasWidth = this.node.parentNode.clientWidth; - const { data = [], autoLabel = true } = this.props; - if (!autoLabel) { - return; - } - const minWidth = data.length * 30; - const { autoHideXLabels } = this.state; + requestAnimationFrame(() => { + const canvasWidth = this.node.parentNode.clientWidth; + const { data = [], autoLabel = true } = this.props; + if (!autoLabel) { + return; + } + const minWidth = data.length * 30; + const { autoHideXLabels } = this.state; - if (canvasWidth <= minWidth) { - if (!autoHideXLabels) { + if (canvasWidth <= minWidth) { + if (!autoHideXLabels) { + this.setState({ + autoHideXLabels: true, + }); + } + } else if (autoHideXLabels) { this.setState({ - autoHideXLabels: true, + autoHideXLabels: false, }); } - } else if (autoHideXLabels) { - this.setState({ - autoHideXLabels: false, - }); - } + }); } handleRoot = n => { diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js index 0d0dc3c5..2e68fdc6 100644 --- a/src/components/Charts/Pie/index.js +++ b/src/components/Charts/Pie/index.js @@ -19,8 +19,6 @@ export default class Pie extends Component { }; componentDidMount() { - this.getLegendData(); - this.resize(); window.addEventListener('resize', this.resize); } @@ -46,12 +44,17 @@ export default class Pie extends Component { getG2Instance = chart => { this.chart = chart; + requestAnimationFrame(() => { + this.getLegendData(); + this.resize(); + }); }; // for custom lengend view getLegendData = () => { if (!this.chart) return; const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形 + if (!geom) return; const items = geom.get('dataArray') || []; // 获取图形对应的 const legendData = items.map(item => { @@ -71,22 +74,24 @@ export default class Pie extends Component { @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) { + requestAnimationFrame(() => { + 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: true, + legendBlock: false, }); } - } else if (this.state.legendBlock) { - this.setState({ - legendBlock: false, - }); - } + }); } handleRoot = n => { diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js index fc3ab444..588d9824 100644 --- a/src/components/Charts/Radar/index.js +++ b/src/components/Charts/Radar/index.js @@ -12,7 +12,9 @@ export default class Radar extends Component { }; componentDidMount() { - this.getLengendData(); + requestAnimationFrame(() => { + this.getLengendData(); + }); } componentWillReceiveProps(nextProps) { diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js index 08418ea1..1c284ab7 100644 --- a/src/components/Charts/TagCloud/index.js +++ b/src/components/Charts/TagCloud/index.js @@ -19,8 +19,10 @@ class TagCloud extends Component { }; componentDidMount() { - this.initTagCloud(); - this.renderChart(); + requestAnimationFrame(() => { + this.initTagCloud(); + this.renderChart(); + }); window.addEventListener('resize', this.resize); } @@ -36,7 +38,9 @@ class TagCloud extends Component { } resize = () => { - this.renderChart(); + requestAnimationFrame(() => { + this.renderChart(); + }); }; saveRootRef = node => { diff --git a/src/components/Charts/WaterWave/index.js b/src/components/Charts/WaterWave/index.js index 5b463ad5..f5ea26a0 100644 --- a/src/components/Charts/WaterWave/index.js +++ b/src/components/Charts/WaterWave/index.js @@ -13,9 +13,10 @@ export default class WaterWave extends PureComponent { }; componentDidMount() { - this.renderChart(); - this.resize(); - + requestAnimationFrame(() => { + this.renderChart(); + this.resize(); + }); window.addEventListener('resize', this.resize); } @@ -28,10 +29,12 @@ export default class WaterWave extends PureComponent { } resize = () => { - const { height } = this.props; - const { offsetWidth } = this.root.parentNode; - this.setState({ - radio: offsetWidth < height ? offsetWidth / height : 1, + requestAnimationFrame(() => { + const { height } = this.props; + const { offsetWidth } = this.root.parentNode; + this.setState({ + radio: offsetWidth < height ? offsetWidth / height : 1, + }); }); }; diff --git a/src/routes/Account/Settings/Info.js b/src/routes/Account/Settings/Info.js index e6ec2a1d..149b9f71 100644 --- a/src/routes/Account/Settings/Info.js +++ b/src/routes/Account/Settings/Info.js @@ -52,16 +52,18 @@ export default class Info extends Component { if (!this.main) { return; } - let mode = 'inline'; - const { offsetWidth } = this.main; - if (this.main.offsetWidth < 641 && offsetWidth > 400) { - mode = 'horizontal'; - } - if (window.innerWidth < 768 && offsetWidth > 400) { - mode = 'horizontal'; - } - this.setState({ - mode, + requestAnimationFrame(() => { + let mode = 'inline'; + const { offsetWidth } = this.main; + if (this.main.offsetWidth < 641 && offsetWidth > 400) { + mode = 'horizontal'; + } + if (window.innerWidth < 768 && offsetWidth > 400) { + mode = 'horizontal'; + } + this.setState({ + mode, + }); }); }; render() { diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js index 16b7e3b0..ecb0f247 100644 --- a/src/routes/Forms/AdvancedForm.js +++ b/src/routes/Forms/AdvancedForm.js @@ -68,11 +68,13 @@ class AdvancedForm extends PureComponent { window.removeEventListener('resize', this.resizeFooterToolbar); } resizeFooterToolbar = () => { - const sider = document.querySelectorAll('.ant-layout-sider')[0]; - const width = `calc(100% - ${sider.style.width})`; - if (this.state.width !== width) { - this.setState({ width }); - } + requestAnimationFrame(() => { + const sider = document.querySelectorAll('.ant-layout-sider')[0]; + const width = `calc(100% - ${sider.style.width})`; + if (this.state.width !== width) { + this.setState({ width }); + } + }); }; render() { const { form, dispatch, submitting } = this.props; diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js index cb0ccce9..727dbb30 100644 --- a/src/routes/Profile/AdvancedProfile.js +++ b/src/routes/Profile/AdvancedProfile.js @@ -212,17 +212,19 @@ export default class AdvancedProfile extends Component { @Bind() @Debounce(200) setStepDirection() { - const { stepDirection } = this.state; - const w = getWindowWidth(); - if (stepDirection !== 'vertical' && w <= 576) { - this.setState({ - stepDirection: 'vertical', - }); - } else if (stepDirection !== 'horizontal' && w > 576) { - this.setState({ - stepDirection: 'horizontal', - }); - } + requestAnimationFrame(() => { + const { stepDirection } = this.state; + const w = getWindowWidth(); + if (stepDirection !== 'vertical' && w <= 576) { + this.setState({ + stepDirection: 'vertical', + }); + } else if (stepDirection !== 'horizontal' && w > 576) { + this.setState({ + stepDirection: 'horizontal', + }); + } + }); } render() { -- GitLab