React中useEffect内使用clearInterval的困惑及挂载卸载疑问

问题解答 #

先贴出你提到的React代码：

function TimeArea() {
  const [theTime, setTheTime] = useState(new Date().toLocaleString())

  // Confused here!
  useEffect(() => {
    const interval = setInterval(() => setTheTime(new Date().toLocaleString()), 1000)
    return () => clearInterval(interval)
  }, [])

  return <p>The current time is {theTime}.</p>
}

1. 为什么定时器能正常工作，return里的clearInterval没提前终止它？

你搞反了执行逻辑：

• 组件首次加载时，useEffect的主回调会先执行：调用setInterval创建一个每秒触发一次的定时器，这个定时器创建后立刻开始计时，1秒后第一次更新theTime，之后每1秒更新一次。
• 那个return () => clearInterval(interval)是清理函数，它不会在主回调执行时立刻运行，只有等到组件被销毁，或者这个useEffect因为依赖变化要重新执行时，才会被触发执行。所以平时定时器一直在正常运转，只有组件要消失的时候才会被清除。

2. mount和unmount在这个场景里的具体作用

• mount（组件挂载）：就是组件第一次渲染到页面上的时机，这里useEffect的依赖是[]空数组，意味着这个useEffect的主回调只会在mount时执行一次，这样就只创建一次定时器，避免重复创建多个定时器导致时间更新混乱。
• unmount（组件卸载）：就是组件从页面上消失的时机（比如关闭页面、切换路由离开这个组件），这时候React会自动调用useEffect返回的清理函数，把之前创建的定时器清除掉——要是不清除，组件都销毁了，定时器还在后台每秒调用setTheTime，会造成内存泄漏，甚至引发报错。

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