Reactjs 清除超时/间隔是否必须在'useEffect'挂钩内？

我想知道在使用React挂钩时，清除超时/间隔的正确方法和最佳实践是什么。例如，我有以下代码：

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

const Test = () => {
  const id = useRef(null)
  const [count, setCount] = useState(5)
  const [timesClicked, setTimesClicked] = useState(0)

  if (!count) {
    clearInterval(id.current)
  }

  useEffect(() => {
    id.current = setInterval(() => {
      setCount(count => count -1)
    }, 1000)

    return () => {
      clearInterval(id.current)
    }
  }, [])

  const onClick = () => setTimesClicked(timesClicked => timesClicked + 1)

  return (
    <div>countdown: {count >= 0 ? count : 0}
      <hr />
      Clicked so far: {timesClicked}
      {count >= 0 && <button onClick={onClick}>Click</button>}
    </div>
  )
}

import React，{useState，useffect，useRef}来自'React'；
常数测试=（）=>{
const id=useRef（空）
const[count，setCount]=useState（5）
常量[timesClicked，setTimesClicked]=useState（0）
如果（！计数）{
清除间隔（id.current）
}
useffect（（）=>{
id.current=setInterval（（）=>{
setCount（计数=>count-1）
}, 1000)
return（）=>{
清除间隔（id.current）
}
}, [])
const onClick=（）=>setTimesClicked（timesClicked=>timesClicked+1）
返回(
倒计时：{count>=0？计数：0}

到目前为止已单击：{timesClicked}
{count>=0&&Click}
)
}

---

当

count

等于0时，

Test

函数主体中的间隔被清除。在我在互联网上看到的大多数示例中，间隔在

useffect

中被清除，这是强制性的吗？

setInterval

是一个

函数，重复执行，它返回间隔的
id
。当您使用此id调用
clearInterval
时，您将停止该
函数的重复。在某个
函数
中执行此操作不是强制性的，当您不再希望随后调用该
函数
时，需要将其清除。如果需要的话，可以在
函数中调用它
返回
useffect
。
必须确保在卸载组件之前清除所有间隔。
卸载组件时，间隔不会自动消失，为了清除它们，
clearInterval
通常在useffect（（）=>{}，[]）内部调用

卸载组件时，将调用useEffect（（）=>{}，[]）中返回的函数

    return () => {
      clearInterval(id.current)
    }

通过检查此沙盒链接，可以看到组件内部设置的间隔不会自动消失

除非调用
clearInterval
，否则间隔将永远保持。
我的问题是，清除间隔是否必须发生在
useffect
内部。在我的示例中，我不是在
useffect
中清除间隔，而是在功能组件的主体中清除间隔。它们对我的方法有什么缺点吗？由于许多原因，组件会频繁更新，每次都会调用
if（！count）
。因此，最好使用
useffect
。