react 定時刷新時數據逐步增加

刷新頁面 或者定時刷新數據的時候 比如我想顯示的數字是100000, 正常刷新的時候 , 數據會直接從0到1000000 , 我想從0 漸變遞增到1000000, 該如何實現呢, 其實使用js也可以實現的, 在此項目中 我使用了d3

import React from 'react';
import PropTypes from 'prop-types';
import injectSheet from 'react-jss';
import { inject } from 'mobx-react';
import Counter from '../../../../../commonComps/counter/index.js';
import './index.styl';
import { get } from 'client/util/http'; // eslint-disable-line
import { fail } from 'client/util/utils'; // eslint-disable-line

const styles = () => ({
  publishRoot: {
    width: '100%',
    height: '100%',
    '& .iconfont': {
      color: '#00b4ed',
    },
  },
});

@injectSheet(styles)
@inject('CatalogManageStore')

class AllTimes extends React.Component {
  static propTypes = {
    classes: PropTypes.object,
  }

  constructor() {
    super();
    this.state = {
      publishValue: 0,
    };
  }

  getNumber = (n) => {
    if (n >= 1e+12) {
      return <React.Fragment><Counter data={Number((n / 1e+12).toFixed(4))} />萬億</React.Fragment>;
    } else if (n >= 1e+8) {
      return <React.Fragment><Counter data={Number((n / 1e+8).toFixed(4))} />億</React.Fragment>;
    } else if (n >= 1e+4) {
      return <React.Fragment><Counter data={Number((n / 1e+4).toFixed(4))} />萬</React.Fragment>;
    }
    return <Counter data={n} />;
  }

  render() {
    const { classes } = this.props;
    const { publishValue, createValue, data } = this.state;
    return (
      <div className={classes.publishRoot} id="allTimes">
        <div className="item">
          <div className="name">已發佈服務</div>
          <div className="num">{this.getNumber(publishValue)}</div>
          <span className="bgIcon"><i className="icon iconfont icon-yifabudefuwu" /></span>
        </div>      
      </div>
    );
  }
}

export default AllTimes;

counter.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { fromJS } from 'immutable';
import PlayCounter from './render';

export default class Counter extends Component {
  constructor(props) {
    super(props);
    this.num = 0;
  }
  componentDidMount() {
    PlayCounter(this.counter, this.props.data, this.num);
  }
  shouldComponentUpdate(nextProps) {
    if (!fromJS(nextProps).equals(fromJS(this.props))) {
      return true;
    }
    return false;
  }
  componentDidUpdate() {
    PlayCounter(this.counter, this.props.data, this.num);
    this.num = this.props.data;
  }
  render() {
    return (
      <span className="counter" ref={(node) => { this.counter = node; }} />
    );
  }
}

Counter.propTypes = {
  data: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
};

render.js

import * as d3 from 'd3';

export default function PlayCounter(id, data, num) {
  const duration = 1000;
  d3.select(id)
    .text(num)
    .transition()
    .duration(duration)
    .tween('text', () => {
      const i = d3.interpolate(num, data);
      function count(t) {
        let content = 0;
        if (t === 1) {
          content = data;
        } else {
          content = Math.round(i(t));
        }
        d3.select(id)
          .text(content);
        // this.textContent = content;
      }
      return count;
    });
}