React中useEffect返回clear函数的作用及useRef的必要性解析

问题1：为何useEffect中必须返回clear函数？移除该返回语句后timeLeft计数异常？ #

React里useEffect返回的函数是清理函数，它会在组件卸载时执行，或者当该useEffect的依赖项变化、准备重新运行effect之前触发。

你的代码里第一个useEffect用了空依赖数组[]，意味着它只会在组件首次挂载时运行一次，创建一个每秒递减timeLeft的定时器。如果不返回clear函数：

• 要是组件因为页面跳转、父组件重新渲染等原因被卸载，原来的定时器不会被清除，会一直在后台运行，继续修改timeLeft状态，不仅造成内存泄漏，还会导致组件重新挂载时创建新的定时器，多个定时器同时修改timeLeft，出现一秒内timeLeft跳减好几的异常。
• 返回clear函数后，组件卸载时会自动调用clearInterval(id.current)，关掉之前创建的定时器，避免上述问题。

补充：你代码里第二个useEffect是在timeLeft到0时手动清定时器，这是正常结束的清理，但组件意外卸载的情况，只能靠第一个useEffect的返回清理函数处理。

问题2：此处useRef的作用是什么？ #

这里用useRef是为了在组件整个生命周期内保存定时器ID，且不会因组件重新渲染丢失或触发额外渲染。

原因如下：

• 如果用useState存定时器ID，每次修改state都会触发组件重新渲染，完全没必要，毕竟定时器ID是不需要触发渲染的临时值。
• useRef的.current属性是可变容器，它的变化不会触发组件重新渲染，不管组件渲染多少次，id.current都能保持同一个引用：
  1. 第一个useEffect创建定时器后，能把ID存在id.current里；
  2. 第二个useEffect判断timeLeft为0时，能通过id.current拿到正确的定时器ID来清除；
  3. 组件卸载时，清理函数也能通过id.current拿到ID去清除定时器。

简单说，useRef在这里就是个“跨渲染周期存值”的容器，专门存放这种不需要触发UI更新的变量。

完整代码 #

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

const App = () => {
  const [count, setCount] = useState(0);
  const [timeLeft, setTimeLeft] = useState(10);
  const id = useRef(null);

  // 停止定时器的函数
  const clear = () => clearInterval(id.current);


  useEffect(() =>{
    // 存储定时器ID，用于后续停止计数
    id.current = setInterval(() =>{
      setTimeLeft((time) => time - 1)
    },1000)
    // 返回清理函数，组件卸载时清除定时器
    return clear     
  },[])

  // 当timeLeft归零时，停止定时器
  useEffect(() =>{
    if(timeLeft === 0){
      clear()
    }
  })
  return (
    <div>
      <h1>{count}</h1>
      <h1>{timeLeft}</h1>
      {timeLeft > 0 && <button onClick={() => setCount(count + 1)}>click</button>}
    </div>
  )
}

export default App

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