react+moment实现倒计时

方法一： 在useEffect 内执行setInterval

import React, { useState, useRef, useEffect } from 'react';
import moment from 'moment';

// 组件四、时间组件
export function LeftTime() {
  const [current, setTime] = useState("0 天 0 时 0 分 0 秒");

  const timerID: any = useRef();
  
  const deadLine= moment('2020-10-19 20:40:25');

  const deadLineTime = deadLine.diff(moment())

  let durationTime = moment.duration(deadLineTime);

  
  let isArrived =  deadLineTime < 0;
  
  useEffect(() => {
    timerID.current = setInterval(() => {
      let arriveTime = `${durationTime.days()} 天 ${durationTime.hours()} 时 ${durationTime.minutes()} 分 ${durationTime.seconds()} 秒`;
      if (!isArrived) {
        durationTime = moment.duration(deadLine.diff(moment()));
        setTime(() => arriveTime); // make pretty
      }
    }, 1000);
  }, []);

  useEffect(() => {
    if (isArrived) {
      clearInterval(timerID.current);
    }
  });

  return (
    <div>
      {current}
    </div>
  );
}

方法二： 使用ahooks的 useInterval

import React, { useState, useRef, useEffect } from 'react';
import moment from 'moment';
import { useInterval } from 'ahooks';

// 组件四、时间组件
export function LeftTime() {
  const [interval, setInterval] = useState(1000);
  const [current, setTime] = useState<any>("0 天 0 时 0 分 0 秒");

  useEffect(() => {
    if (isArrived) {
      setInterval(null);
    }
  });

  const deadLine= moment('2020-10-19 20:22:45');

  const deadLineTime = deadLine.diff(moment())

  let durationTime = moment.duration(deadLineTime);

  let isArrived =  deadLineTime < 0;

  useInterval(
    () => {
      let arriveTime = `${durationTime.days()} 天 ${durationTime.hours()} 时 ${durationTime.minutes()} 分 ${durationTime.seconds()} 秒`;
      if (!isArrived) {
         durationTime = moment.duration(deadLine.diff(moment()));
        setTime(() => arriveTime); // make pretty
      }
    },
    interval,
    { immediate: true }
  );



  return (
    <div>
      {current}
    </div>
  );
}

moment

1. const deadLine= moment('2020-10-20');
   得到moment指定时间对象
2. deadLine.startOf('day');
   得到 开始于20日零点值，Tue Oct 20 2020 00:00:00
3. deadLine.diff(moment())
   得到两个 时间差 ，毫秒差值
4. durationTime = moment.duration(deadLine.diff(moment()));
   返回 时长 对象，其时长在 当前时间 和 deadLine 之间。
5. durationTime.day()、 durationTime.hours()、 durationTime.milliseconds()..
   获得天、小时、毫秒值等结果

优化方法三

import React, { useState, useRef, useEffect } from 'react';
import moment from 'moment';
import styles from './LeftTime.module.less';
import { useInterval } from 'ahooks';

// 组件四、时间组件
export function LeftTime(props: any) {
  const { preWord, cb, deadLine } = props;
  const [now, setNOW] = useState(Date.now()); 
  const [interval, setIntervalTime] = useState(1000)

  useInterval(() => {
    setNOW(now + 1000); // 本地倒计时
  }, interval);

  let deadLineTime = deadLine.diff(moment(now));
  let durationTime = moment.duration(deadLineTime);
  
  useEffect(() => {
    if (deadLineTime <= 0) {
      setIntervalTime(null);
    }
  });

  return (
    <div className={styles.wholeLeftTime}>
      <div className={styles.preWord}>{preWord}</div>
      <div className={styles.timeGroup}>
        {durationTime.days() > 0 && (
          <div>
            <div className={styles.timeWord}>{durationTime.days()}</div>
          </div>
        )}
        {durationTime.days() > 0 && <div className={styles.day}>天</div>}
        <div>
          <div className={styles.timeWord}>{durationTime.hours()}</div>
        </div>
        <div className={styles.second}>:</div>
        <div>
          <div className={styles.timeWord}>{durationTime.minutes()}</div>
        </div>
        <div className={styles.second}>:</div>
        <div>
          <div className={styles.timeWord}>{durationTime.seconds()}</div>
        </div>
      </div>
    </div>
  );
}