react 如何处理时间戳

时间戳转换为可读格式

使用 new Date() 将时间戳转换为日期对象，再通过内置方法格式化输出。例如显示为 YYYY-MM-DD HH:MM:SS：

const timestamp = 1625097600000;
const date = new Date(timestamp);
const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;

使用第三方库格式化

引入 moment.js 或 date-fns 简化操作：

import moment from 'moment';
const formattedDate = moment(1625097600000).format('YYYY-MM-DD HH:mm:ss');

// 或使用 date-fns
import { format } from 'date-fns';
const formattedDate = format(new Date(1625097600000), 'yyyy-MM-dd HH:mm:ss');

处理相对时间

展示“几小时前”、“几天前”等相对时间：

import moment from 'moment';
const relativeTime = moment(1625097600000).fromNow(); // 输出如 "3 days ago"

时区转换

使用 moment-timezone 处理时区：

import moment from 'moment-timezone';
const time = moment(1625097600000).tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');

性能优化

对于频繁渲染的时间戳列表，建议在组件外部格式化或使用 useMemo：

import React, { useMemo } from 'react';
function TimeDisplay({ timestamp }) {
  const formattedTime = useMemo(() => {
    return new Date(timestamp).toLocaleString();
  }, [timestamp]);
  return <div>{formattedTime}</div>;
}

服务器与客户端时间同步

解决客户端本地时间与服务器不一致问题：

// 从API获取服务器时间差
const serverTimeDiff = serverTimestamp - Date.now();
// 使用时校正
const correctedTime = new Date(timestamp + serverTimeDiff);