我想知道使用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>
)
}
当count等于0时，间隔在Test函数主体中清除。我在Internet间隔中看到的大多数示例都在内部清除useEffect，这是强制性的吗？
您必须确保在卸下组件之前清除所有间隔。在卸载组件并清除它们时，间隔永远不会自动消失，clearInterval通常在useEffect（（）=> {}，[]）内部调用。
卸载组件后，将调用useEffect（（）=> {}，[]）中记录的函数。
return () => {
clearInterval(id.current)
}
通过检查此沙盒链接，您可以看到在组件内部设置的间隔永远不会自动消失。https://codesandbox.io/s/cool-water-oij8s
除非clearInterval调用，否则间隔将永远保留。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句