- 处理react页面刷新问题, 只是数据定时刷新, 而不是当前页面刷新,类似F5刷新页面
- 在react中, state和props数据更新, 就会重新render
单个请求
- 如果当前页面只有一个请求 那么可以把当前请求放在定时器setInterval中就可以实现当前页数据的定时刷新
多个请求
如果子组件中是echart的请求, 父组件引用众多子组件, 那么此时的定时器应该放在哪里?
- 放在子组件的话, 当然很简单, 只需要把请求塞到定时器中, 当时代码冗余度太好, 还麻烦
- 放在父组件中, 我们只需要使用
this.setState()
, 页面就会刷新, react钩子中写一个定时器, 定时执行, 修改state的值
eg:
同理: 当当前浏览器窗口大小改变,需要重新渲染页面时, 也是这样
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import injectSheet from 'react-jss';
import GetData from './comps/getData/index.js';
import DataExchange from './comps/dataExchange/index.js';
import DataExchangeTop5 from './comps/dataExchangeTop5/index.js';
import './index.styl';
const styles = () => ({
dashboardRoot: {
width: '100%',
boxSizing: 'border-box',
},
});
@injectSheet(styles)
class LoadData extends React.Component {
static propTypes = {
}
constructor() {
super();
this.state = {
reload: false,
};
}
handleResize = () => {
this.setState({
reload: true,
}, () => {
this.setState({ reload: false });
});
}
componentDidMount() {
this.timer = setInterval(() => this.handleResize(), 5000);
}
componentWillUnmount() {
/* eslint-disable */
this.timer && clearTimeout(this.timer);
/* eslint-enable */
}
render() {
const res = this.state.reload ? <div /> :
(
<div>
<div>
<div className="flexBox">
<div className="getData"><GetData/></div>
</div>
</div>
<div className="flexBox">
<div className="Top5"><DataExchangeTop5 /></div>
</div>
<div className="flexBox">
<div className="dataExchange"><DataExchange /></div>
</div>
</div>
);
return res;
}
}
export default LoadData;