react中 echart数据定时刷新

• 处理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;