【taro react】---- 团购或秒杀的批量倒计时实现

1. 预览二维码

2. 效果图

3. 实现思路

1. 传入一个当前时间和活动开始时间的对象；
2. 计算两个时间的时间差；
3. 执行倒计时函数；
4. 格式化时间格式；
5. 更新界面的时间；
6. 判断是否到期，清除倒计时。

4. 组件生命周期执行倒计时或者更新倒计时

1. 初次进入，需要执行更新倒计时函数；
2. 当传入日期更新后，组件也需要对应进行更新；
3. 组件卸载时，需要清空倒计时。

componentDidMount() {
    let { times } = this.props;
    this.updateTimes(times);
  }
  componentWillReceiveProps(nextProps) {
    let { times } = nextProps;
    this.updateTimes(times);
  }
  componentWillUnmount() {
    clearTimeout(this.timer);
  }
1
2
3
4
5
6
7
8
9
10
11

5. 更新倒计时时间time