在react 中不想刷新整個頁面, 只想定時刷新數據而已
直接上代碼
class Refresh extends React.Component {
static propTypes = {
classes: PropTypes.object,
}
constructor() {
super();
this.state = {
reload: false, };
}
handleResize = () => {
this.setState({
reload: true,
}, () => {
this.setState({ reload: false });
});
}
componentDidMount() {
this.resizeHandler = _.debounce(this.handleResize, 500); // 防抖, 當窗口大小改變
window.addEventListener('resize', this.resizeHandler);
this.timer = setInterval(() => this.handleResize(), this.state.refreshTimeValue * 1000);
}
componentWillUnmount() {
window.removeEventListener('resize', this.resizeHandler);
/* eslint-disable */
this.timer && clearTimeout(this.timer);
/* eslint-enable */
}
render() {
const { classes } = this.props;
return (
<div>
{this.state.reload ? <div /> :
(
<div className={classes.root} id="root">
<div className="flexBox">
<div className="item"><AllTimes /></div>
</div>
</div>
)
}
</div>
);
}
}
export default Refresh;