如何用Intl.RelativeTimeFormat实时更新社交动态的时间间隔描述-js教程-PHP中文网

intl.relativetimeformat 不自动实时更新，需手动调用 format()；它纯函数式、无状态，仅保存 locale 和 style 配置，不绑定时间；计算 timediff 应用阈值阶梯法而非简单除法；ssr 时需注意 node icu 数据完整性及降级策略。

如何用intl.relativetimeformat实时更新社交动态的时间间隔描述

Intl.RelativeTimeFormat 不能自动实时更新，必须手动触发

这个 API 本身是纯函数式、无状态的，调用 format() 只返回一个静态字符串，比如 "2 minutes ago"。它不会监听时间流逝，也不会 setInterval 自动重算。想让“2分钟前”变成“3分钟前”，你得自己在合适时机重新调用 format()。

常见错误是以为构造一次 Intl.RelativeTimeFormat 实例就能“绑定”到当前时间——实际它只记住了 locale 和 style 配置，不存任何时间引用。

每次显示新值前，都要用当前时间（Date.now()）减去目标时间戳，算出带符号的数值和单位（如 -2 和 "minute"）
单位必须严格匹配：用 "second" 就不能传 "seconds"，否则返回原始数字而非相对描述
负数表示过去，正数表示将来（如 1 + "day" → "in 1 day"）

如何计算 timeDiff 并选对单位才不翻车

直接用 (Date.now() - timestamp) / 1000 得到秒数再取整？不行——这会丢失精度，且跨单位换算（分→时→天）容易漏边界。推荐用预设阈值阶梯判断：

function getRelativeParts(timestamp) {
  const diffMs = Date.now() - timestamp;
  if (Math.abs(diffMs) <p>注意：<code>value</code> 必须是整数，且单位名必须小写、单数（<code>"day"</code> 不是 <code>"days"</code>），否则 <code>format()</code> 会 fallback 到数字原样输出。</p><h3>React 中每分钟更新一次的轻量实现</h3><p>不用 <code>useEffect</code> + <code>setInterval</code> 每秒刷——太浪费。社交动态的时间粒度通常到“分钟”就够了，每 60s 更新一次即可。关键点：</p>

用 useRef 缓存 Intl.RelativeTimeFormat 实例，避免重复构造
用 useMemo 把时间计算和格式化收拢，依赖项只含 timestamp 和 tick（每分钟自增的 ref）
清理定时器，防止组件卸载后仍触发 setState

示例片段：

const rtf = useRef(new Intl.RelativeTimeFormat("zh-CN", { numeric: "auto" }));
const [tick, setTick] = useState(0);
useEffect(() => {
  const timer = setInterval(() => setTick(t => t + 1), 60 * 1000);
  return () => clearInterval(timer);
}, []);
const relative = useMemo(() => {
  const { value, unit } = getRelativeParts(timestamp);
  return rtf.current.format(value, unit);
}, [timestamp, tick]);