随笔——时长（过去多长时间HH:mm:ss）

import dayjs from 'dayjs';
import React, { useEffect } from 'react';
import { useImmer } from 'use-immer';

export type CdFormat = 'HH:mm:ss' | 'HH:mm' | 'mm:ss';

interface IProps {
  startDate: string | Date;
  format?: CdFormat;
  cb?(): void;
}

const stringToDate = (date: string | Date) => {
  if (typeof date === 'string') {
    // 日期字符串转换为日期对象，并兼容ios
    return new Date(Date.parse(date.replace(/-/g, '/')));
  }
  return date;
};

const Duration: React.FC<IProps> = props => {
  const [formatDate, setFormatDate] = useImmer<string>('');
  const { startDate, format = 'HH:mm:ss', cb = () => {} } = props;
  useEffect(() => {
    let interval: any = null;
    clearInterval(interval);
    if (startDate) {
      const sDate = stringToDate(startDate);
      interval = setInterval(() => {
        setFormatDate(() =>
          dayjs(
            dayjs()
              .subtract(8, 'hour')
              .diff(dayjs(sDate))
          ).format(format)
        );
      }, 1000);
    }
    return () => {
      clearInterval(interval);
    };
  }, [startDate]);
  return <div>{formatDate || ''}</div>;
};

export default React.memo(Duration);

引用上述组件

<Duration startDate='2018-12-16 10:12:30' format="HH:mm:ss" />

效果：
在线时长按秒递增