为什么clearinterval()在具有空依赖关系的useEffect中不起作用

Question

输出：1秒后增加第二个值…………1………2………3………4等等告诉我为什么会这样我知道另一个进程会这样做，但为什么这个进程没有停止间隔

const [seconds, setSeconds] = useState(0);
const [Flag,setFlag]= useState(0);
function inc() {
setSeconds(seconds=>seconds + 1);
setFlag(1);
}
useEffect(() => {
let interval = setInterval(inc, 1000);
if(Flag===1)
{
console.log("inside");
clearInterval(interval);
}
}, []);

Answer 1

• 我们应该添加Flag作为useEffect依赖项，否则useEffect不会知道Flag变为1。

• 我们应该将setInterval计时器存储到Ref变量

  const timer = useRef();
  const [seconds, setSeconds] = useState(0);
  const [Flag, setFlag] = useState(0);
  function inc() {
  setSeconds((seconds) => seconds + 1);
  setFlag(1);
  }
  useEffect(() => {
  if (Flag === 1) {
  if (timer.current) {
  clearInterval(timer.current);
  }
  } else {
  timer.current = setInterval(inc, 1000);
  }
  }, [Flag]);
  

Answer 2

为什么不停止很简单：useEffect回调只运行一次(因为空的依赖数组使其行为类似于componentDidMount(。当运行时，Flag为0，因此clearInterval不运行。