javascript - React hooks useEffect 即使在 [] 作为 deps 的情况下运行

Question

我面临着一个很奇怪的问题。下面是代码

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setCount(count => count + 1), 1000);
    return () => {
      clearInterval(id);
    };
  }, []);

  return <div>{count}</div>;
};

据我所知，由于我给出了一个空数组，因此 useEffect 将仅在第一次渲染后运行。另外，由于我正在清除间隔计数，因此在 COUNT=1 后不得更新计数。 setInterval 似乎仍在连续运行。谁能解释一下吗？

是不是因为我被赋予了 [] 作为 deps，所以间隔在某种程度上没有被清除？

Answer 1

clearInterval(id) - 这将在组件卸载之前被调用。只要组件未卸载，从 useEffect 返回的函数就不会被调用。因此间隔不会被清除，状态将继续更新，从而计数增加。当组件 Counter 被卸载时，间隔被清除