如何基于特定时区修改React状态？以面包店营业状态为例

问题描述 #

本地面包店网站需显示营业时间及动态变化的“营业中/打烊”标签，现有方案通过React状态管理当前时间与营业状态：

实时时钟实现代码：

const [date, setDate] = useState(new Date());

useEffect(() => {
    let timer = setInterval(() => setDate(new Date()), 1000);
    return function cleanup() {
      clearInterval(timer);
    };
});

营业状态判断函数：

const handleStatus = () => {
    let openHour = new Date();
    let closeHour = new Date();
    openHour.setHours(9, 0, 0);
    closeHour.setHours(18, 30, 0);
    if (date > openHour) {
      //CLOSED
    } else {
     //OPEN
    }
};

该方案仅适配用户本地时区，无法满足跨时区需求：例如纽约用户晚9点时，洛杉矶为晚6点（面包店6:30才打烊），此时用户应看到“营业中”，需解决跨时区适配问题。

核心思路 #

所有时间判断需基于面包店所在的目标时区，而非用户本地时区。需将用户当前时间转换为面包店时区的时间后，再与营业时间对比。

具体实现方案 #

方案一：手动时区转换（无第三方依赖） #

1. 确定面包店所在时区的UTC偏移量（需注意夏令时带来的偏移变化）
2. 将用户本地时间转换为面包店时区时间后进行判断：

const handleStatus = () => {
    // 面包店时区的UTC偏移分钟数（洛杉矶标准时区为UTC-8，即-480分钟）
    const bakeryUtcOffset = -480; 
    // 计算当前UTC时间戳（毫秒）
    const currentUtcTimestamp = date.getTime() + date.getTimezoneOffset() * 60 * 1000;
    // 转换为面包店时区的本地时间
    const bakeryLocalTime = new Date(currentUtcTimestamp + bakeryUtcOffset * 60 * 1000);
    
    // 设置面包店的营业时间（基于自身时区）
    const openHour = new Date(bakeryLocalTime);
    openHour.setHours(9, 0, 0, 0);
    const closeHour = new Date(bakeryLocalTime);
    closeHour.setHours(18, 30, 0, 0);
    
    // 返回营业状态
    return bakeryLocalTime >= openHour && bakeryLocalTime < closeHour ? "营业中" : "打烊";
};

注意：夏令时会改变UTC偏移量，需额外维护夏令时的起止日期来调整偏移量，适合时区规则明确、无需覆盖多地区的场景。

方案二：使用Intl API自动处理时区（推荐） #

借助浏览器原生的Intl.DateTimeFormat API，自动处理夏令时与时区转换，支持所有IANA时区标识符：

const handleStatus = () => {
    // 面包店所在时区标识符（例如洛杉矶为"America/Los_Angeles"）
    const bakeryTimezone = "America/Los_Angeles";
    
    // 获取面包店时区的当前时分秒
    const bakeryTimeParts = new Intl.DateTimeFormat('en-US', {
        timeZone: bakeryTimezone,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    }).formatToParts(date);
    
    // 转换为分钟数，简化时间比较
    const currentMinutes = parseInt(bakeryTimeParts.find(part => part.type === 'hour').value) * 60 + 
                          parseInt(bakeryTimeParts.find(part => part.type === 'minute').value);
    const openMinutes = 9 * 60; // 9:00
    const closeMinutes = 18 * 60 + 30; // 18:30
    
    // 返回营业状态
    return currentMinutes >= openMinutes && currentMinutes < closeMinutes ? "营业中" : "打烊";
};

该方案无需手动维护时区规则，兼容性好，是跨时区场景下的可靠选择。

优化实时时钟逻辑 #

原每秒更新状态会导致不必要的重渲染，可优化为仅在分钟变化时更新：

const [date, setDate] = useState(new Date());

useEffect(() => {
    // 计算距离下一分钟开始的延迟时间
    const now = new Date();
    const delay = 60000 - (now.getSeconds() * 1000 + now.getMilliseconds());
    
    const timer = setTimeout(() => {
        setDate(new Date());
        // 之后每分钟更新一次
        const interval = setInterval(() => setDate(new Date()), 60000);
        return () => clearInterval(interval);
    }, delay);
    
    return () => clearTimeout(timer);
}, []);

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