React中使用useEffect显示时间：空依赖为何仍每秒更新？

代码示例 #

import React, { useState, useEffect } from 'react';

function Child() {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

  }, []);

  return <p>The current time is: {time.toLocaleTimeString()}</p>;
}
export default Child;

问题描述 #

我编写了上述React代码，通过useState和useEffect Hook实现时间显示功能，将useEffect的依赖项设置为空数组。按Hook规则组件应仅执行一次副作用，但实际页面时间每秒都在更新，请问这段代码的工作原理是什么？

原理解析 #

• 空依赖的useEffect确实只会在组件首次挂载时执行一次，这完全符合Hook的规则。关键在于定时器的生命周期和React组件渲染周期是相互独立的。
• 组件首次挂载时，useEffect执行并创建了一个每秒触发一次的setInterval定时器。这个定时器一旦被创建，就会脱离React的组件管理逻辑，只要不手动清除，它会一直按设定的间隔在后台运行。
• 每次定时器触发时，都会调用setTime(new Date())更新组件state，而state更新会触发组件重新渲染，因此页面上的时间会每秒刷新一次。
• 这里有个隐藏的隐患：这段代码没有在组件卸载时清除定时器，会导致内存泄漏。正确的写法应该在useEffect的返回函数中添加清除逻辑：

useEffect(() => {
  const interval = setInterval(() => {
    setTime(new Date());
  }, 1000);

  return () => clearInterval(interval); // 组件卸载时清除定时器，避免内存泄漏
}, []);

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