使用reactrenderprops实现倒计时的示例代码-创新互联

react的组件模式可以观看Michael Chan的演讲视频，平时大家常听到的react模式也是HOC, HOC的使用场景很多，譬如react-redux的connect，这里不赘述HOC相关，感兴趣可以自行了解。

首先是这样一个场景，我的业务需要实现倒计时，倒计时你懂得，倒计时经常应用在预告一个活动的开始，像秒杀，像开售抢购等，或者活动的截止。

我们来梳理一下这个倒计时的功能：

• 定时更新时间，以秒为度;
• 可以更新倒计时的截止时间，比如从10月1日更新为10月2日；
• 倒计时结束，执行对应结束逻辑;
• 倒计时结束，开启另一个活动倒计时；
• 同时有多个倒计时；

这个时候我便开始编码，考虑代码复用，我用Class的模式实现一个倒计时:

class Timer {
 constructor(time, countCb, timeoutCb) {
  this.countCb = countCb;
  this.timeoutCb = timeoutCb;
  this.setDelayTime(time);
 }

 intervalId = null;

 clearInterval = () => {
  if (this.intervalId) {
   clearInterval(this.intervalId);
  }
 }

 // 更新倒计时的截止时间
 setDelayTime = (time) => {
  this.clearInterval();

  if (time) {
   this.delayTime = time;
   this.intervalId = setInterval(() => {
    this.doCount();
   }, 1000);
  }
 }

 doCount = () => {
  const timeDiffSecond =
   `${this.delayTime - Date.now()}`.replace(/\d{3}$/, '000') / 1000;

  if (timeDiffSecond <= 0) {
   this.clearInterval();
   if (typeof this.timeoutCb === 'function') {
    this.timeoutCb();
   }
   return;
  }

  const day = Math.floor(timeDiffSecond / 86400);
  const hour = Math.floor((timeDiffSecond % 86400) / 3600);
  const minute = Math.floor((timeDiffSecond % 3600) / 60);
  const second = Math.floor((timeDiffSecond % 3600) % 60);

  // 执行回调，由调用方决定显示格式
  if (typeof this.countCb === 'function') {
   this.countCb({
    day,
    hour,
    minute,
    second,
   });
  }
 }
}

export default Timer;

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。