我正在尝试重构我的代码以响应钩子,但我不确定我是否正确执行。我尝试将我的 setInterval/setTimout 代码复制并粘贴到钩子中,但它没有按预期工作。在尝试了不同的事情后,我能够让它工作,但我不确定这是否是最好的方法。
我知道我可以使用 useEffect 在卸载时清除间隔,但我想在卸载前清除它。
以下是良好的做法,如果不是,在卸载之前清除 setInterval/setTimout 的更好方法是什么?
谢谢,
使用超时
import { useState, useEffect } from 'react';
let timer = null;
const useTimeout = () => {
const [count, setCount] = useState(0);
const [timerOn, setTimerOn] = useState(false);
useEffect(() => {
if (timerOn) {
console.log("timerOn ", timerOn);
timer = setInterval(() => {
setCount((prev) => prev + 1)
}, 1000);
} else {
console.log("timerOn ", timerOn);
clearInterval(timer);
setCount(0);
}
return () => {
clearInterval(timer);
}
}, [timerOn])
return [count, setCount, setTimerOn]; …Run Code Online (Sandbox Code Playgroud)