javascript - React Hook 实现导致并排计数变慢

Question

当第一个功能组件在 React 应用程序中并排组合时，为什么第一个功能组件比第二个功能组件慢并且您切换选项卡然后在几秒钟后返回它？

这是一个沙盒，您可以看到它的运行情况。

https://codesandbox.io/s/useeffect-87pm7

function SlowerCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [count]);

  return <div>The count is: {count}</div>;
}

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count => ++count);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <div>The count is: {count}</div>;
}

Answer 1

问题在于，在第二个 useEffect 中，您在每次渲染时设置并清除了一个新的间隔，而其他人则继续在同一个实例上运行。

它causes a different effect on the interval when you switching tabs ，因此，useEffect 逻辑 和对浏览器选项卡工作方式的理解 导致了“错误”。

尝试为 useEffect 中的每个清除函数添加日志记录:

function SuggestedWayToUseEffectOneButItsActuallyNotWorkingCorrectly() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => {
      console.log('cleared 2');
      clearInterval(intervalId);
    };
  }, [count]);

  return <div>The count is: {count}</div>;
}