React应用中计算日期差并转换为天、时、分格式的实现方案

核心逻辑步骤 #

• 先定义固定的时间单位毫秒换算值：

const MS_PER_MINUTE = 60 * 1000;
const MS_PER_HOUR = 60 * MS_PER_MINUTE;
const MS_PER_DAY = 24 * MS_PER_HOUR;

• 计算原始毫秒差值：用当前时间戳减去请求发送时间戳（确保请求时间是可转为数字的格式，比如Date.parse(request.sendTime)或直接存储的时间戳）

const diffMs = Date.now() - requestSendTimestamp;

• 拆解差值为天、时、分：
  1. 计算天数：取差值除以一天毫秒数的整数部分，再用取余得到剩余毫秒数
  2. 用剩余毫秒数计算小时数，同样取整后取余得到剩余毫秒数
  3. 最后用剩余毫秒数计算分钟数
     代码示例：

let remainingMs = diffMs;
const days = Math.floor(remainingMs / MS_PER_DAY);
remainingMs %= MS_PER_DAY;

const hours = Math.floor(remainingMs / MS_PER_HOUR);
remainingMs %= MS_PER_HOUR;

const minutes = Math.floor(remainingMs / MS_PER_MINUTE);

这样拆解后，天、时、分转换为毫秒的总和与原始差值的误差最多为59秒999毫秒，完全符合要求的“相近”，且差值不超过1个月的场景下无精度问题。

• 格式化输出文本：处理单复数并拼接成目标格式，示例函数：

function formatTimeDiff(days, hours, minutes) {
  const parts = [];
  if (days > 0) {
    parts.push(`${days} ${days === 1 ? 'Day' : 'Days'}`);
  }
  if (hours > 0) {
    parts.push(`${hours} ${hours === 1 ? 'Hour' : 'Hours'}`);
  }
  // 确保至少显示分钟（即使天和时都为0）
  if (minutes > 0 || parts.length === 0) {
    parts.push(`${minutes} ${minutes === 1 ? 'Minute' : 'Minutes'}`);
  }
  return `before: ${parts.join(', ')}.`;
}

React组件中的使用方式 #

可以封装成自定义Hook实现自动更新：

import { useState, useEffect } from 'react';

const MS_PER_MINUTE = 60 * 1000;
const MS_PER_HOUR = 60 * MS_PER_MINUTE;
const MS_PER_DAY = 24 * MS_PER_HOUR;

function formatTimeDiff(days, hours, minutes) {
  const parts = [];
  if (days > 0) {
    parts.push(`${days} ${days === 1 ? 'Day' : 'Days'}`);
  }
  if (hours > 0) {
    parts.push(`${hours} ${hours === 1 ? 'Hour' : 'Hours'}`);
  }
  if (minutes > 0 || parts.length === 0) {
    parts.push(`${minutes} ${minutes === 1 ? 'Minute' : 'Minutes'}`);
  }
  return `before: ${parts.join(', ')}.`;
}

export function useTimeSince(timestamp) {
  const [formattedTime, setFormattedTime] = useState('');

  useEffect(() => {
    const updateTime = () => {
      const diffMs = Date.now() - timestamp;
      let remainingMs = diffMs;
      const days = Math.floor(remainingMs / MS_PER_DAY);
      remainingMs %= MS_PER_DAY;
      const hours = Math.floor(remainingMs / MS_PER_HOUR);
      remainingMs %= MS_PER_HOUR;
      const minutes = Math.floor(remainingMs / MS_PER_MINUTE);
      setFormattedTime(formatTimeDiff(days, hours, minutes));
    };

    updateTime();
    // 每分钟更新一次，保证时间显示实时性
    const interval = setInterval(updateTime, MS_PER_MINUTE);
    return () => clearInterval(interval);
  }, [timestamp]);

  return formattedTime;
}

在业务组件中调用：

import { useTimeSince } from './hooks';

function CustomerRequestItem({ request }) {
  const timeSince = useTimeSince(request.sendTimestamp);
  return (
    <div className="request-item">
      <h3>{request.title}</h3>
      <span>{timeSince}</span>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Tehila