react 如何处理时间戳
时间戳转换为可读格式
使用 JavaScript 的 Date 对象将时间戳转换为可读格式。时间戳通常以毫秒为单位，可以直接传递给 Date 构造函数。
const timestamp = 1625097600000;
const date = new Date(timestamp);
console.log(date.toLocaleString()); // 输出本地化日期时间字符串格式化日期显示
使用 Intl.DateTimeFormat 或第三方库如 date-fns、moment.js 来格式化日期显示。
// 使用 Intl.DateTimeFormat
const formatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
console.log(formatter.format(date));
// 使用 date-fns
import { format } from 'date-fns';
console.log(format(date, 'yyyy-MM-dd HH:mm'));处理实时更新的时间戳
在 React 组件中，使用 useEffect 和 useState 来处理实时更新的时间戳。
import React, { useState, useEffect } from 'react';
function TimestampDisplay({ timestamp }) {
const [currentTime, setCurrentTime] = useState(new Date(timestamp));
useEffect(() => {
const interval = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
return () => clearInterval(interval);
}, []);
return <div>{currentTime.toLocaleString()}</div>;
}时区处理
处理不同时区的时间戳时，使用 toLocaleString 的时区参数或第三方库。
const date = new Date(timestamp);
console.log(date.toLocaleString('en-US', { timeZone: 'Asia/Shanghai' }));时间戳比较与计算
比较或计算时间戳差值时，直接使用数值运算。
const timestamp1 = 1625097600000;
const timestamp2 = Date.now();
const diffInSeconds = (timestamp2 - timestamp1) / 1000;
console.log(`相差 ${diffInSeconds} 秒`);使用自定义 Hook 封装逻辑
将时间戳处理逻辑封装为自定义 Hook 以便复用。
import { useState, useEffect } from 'react';
function useTimestamp(timestamp) {
const [formattedTime, setFormattedTime] = useState('');
useEffect(() => {
const date = new Date(timestamp);
setFormattedTime(date.toLocaleString());
}, [timestamp]);
return formattedTime;
}服务端渲染 (SSR) 注意事项
在 Next.js 等 SSR 框架中，确保时间戳处理在客户端进行以避免 hydration 不匹配。
function SSRTimestamp({ serverTimestamp }) {
const [clientTime, setClientTime] = useState('');
useEffect(() => {
setClientTime(new Date(serverTimestamp).toLocaleString());
}, [serverTimestamp]);
return <div>{clientTime || 'Loading...'}</div>;
}
