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

当第一个功能组件在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>;
}

最佳答案

问题在于，在第二个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>;
}

关于javascript - React Hook实现导致并行计数变慢，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58835369/