React/React Native中通知组件时间戳文本如何在指定时间后自动更新

问题原因 #

组件当前为纯静态展示组件，仅当props传入的item变化时才会触发重渲染，时间流逝本身不会触发组件重新执行renderTime计算文本，因此会卡在「Just now」的状态不会自动更新。

解决方案 #

给组件添加状态和定时器，在距离通知创建满1分钟时主动触发重渲染，重新计算时间展示文本，修改后代码如下：

import { useState, useEffect } from 'react';

// 原有逻辑保持不变即可
const renderTime = (eventTime) => {
  let toDisplay = eventTime.toLocaleDateString();
  if (isJustNow(eventTime)) {
    toDisplay = "Just now";
  } else if (isToday(eventTime))
    toDisplay = eventTime.toLocaleTimeString("en", {
      hour: "2-digit",
      minute: "2-digit"
    });
  return <Text>{toDisplay}</Text>;
};

export default function NotificationCard({ item }) {
  const [, setUpdateTrigger] = useState(0);

  useEffect(() => {
    const createTime = item.created.getTime();
    // 计算距离1分钟到期还有多少毫秒
    const diffToMinute = 60 * 1000 - (Date.now() - createTime);
    let timer = null;

    // 还在1分钟内，设置到期后触发重渲染
    if (diffToMinute > 0) {
      timer = setTimeout(() => {
        // 修改状态触发重渲染，重新执行renderTime计算
        setUpdateTrigger(prev => prev + 1);
      }, diffToMinute);
    }

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, [item.created]);

  return (
    <ListItem accessoryRight={() => renderTime(item.created)} />  
  );
}

逻辑说明 #

• 通过空操作的状态updateTrigger作为重渲染触发标识，修改该状态会让组件重新执行，自动调用renderTime计算最新的时间文本
• 定时器仅会触发一次，到期后自动失效，不会产生额外性能损耗
• 如果需要支持跨天自动更新日期显示，可以在原有逻辑基础上额外添加到当日零点的定时器，触发重渲染即可

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