使用React useEffect钩子实现时钟组件时的异常行为问题咨询

1 清理函数每秒执行的根本原因 #

你对useEffect清理函数的执行时机认知存在偏差，useEffect的清理函数会在两种场景下触发：

• 组件从DOM卸载时
• 下一次同个useEffect的回调执行前

你将date作为useEffect的依赖项，每次setDate更新date状态后都会触发组件重渲染，useEffect检测到依赖项变化，会先执行上一次返回的清理函数，再执行新的effect回调，因此每秒都会打印清理日志。类组件的componentWillUnmount确实仅在卸载时执行，这是hooks和类组件生命周期逻辑的核心差异之一，二者并不完全对等。 #

2 代码中存在的其他错误 #

• 构造函数拼写错误：new date()应为new Date()，Date作为内置构造函数首字母必须大写
• 变量名不匹配：useState声明的状态变量为datE，后续代码全部误用为date，会直接触发运行时报错
• 依赖数组语法错误：[date)应为[date]，括号符号不匹配
• 定时器清理API误用：创建定时器用的是setInterval，清理必须使用clearInterval，不能用clearTimeout
• 样式属性逻辑错误：display: show? true: 'none'中true是无效值，应改为字符串'block'

3 切换标签页走时丢失的原因 #

浏览器为了降低后台标签页的性能消耗，会对非活跃标签页的定时器做降频处理，setInterval的触发间隔会被拉长甚至完全暂停。你的代码逻辑是每次定时器触发都给现有时间加1秒，如果定时器暂停触发，累计加时就会少算，最终出现走时丢失。类组件的常规实现不会将时间状态放入定时器依赖，也不会每秒重建定时器，因此不会出现该问题。 #

4 修复后的正确实现 #

import { useState, useEffect } from 'react';

const Clock = (props) => {
    const { show, country, timezone } = props;
    // 封装时区时间计算逻辑，直接基于当前时间戳生成正确时间
    const getCurrentTime = () => {
        const t = Date.now() + 3600 * timezone * 1000;
        return new Date(t);
    };
    const [date, setDate] = useState(getCurrentTime());

    useEffect(() => {
        const interval = setInterval(() => {
            // 每次直接计算最新时间，不依赖上一次的状态值
            setDate(getCurrentTime());
        }, 1000);
        return () => {
            console.log("Cleanup function (componentWillUnmount())");
            clearInterval(interval);
        };
    // 仅当timezone变化时才重建定时器，无date依赖，不会每秒重执行effect
    }, [timezone]);

    return (
        <h2 style={{ display: show ? 'block' : 'none' }}>
            Today in {country} is {date.toLocaleDateString() + ' ' + date.toLocaleTimeString()}
        </h2>
    )
};

export default Clock;

修复核心逻辑：

• 移除对date的依赖，仅保留timezone作为依赖项，effect只会在组件挂载、timezone变更、组件卸载时执行，不会每秒触发清理
• 时间更新直接基于当前时间戳计算，不依赖上一次的状态，后台标签页恢复后会自动同步到正确时间，不会出现走时丢失
• 修复了所有语法、API调用错误

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