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>;
}

Answer 2

当您在useEffect中传递带有空数组的第二个参数时，不需要检查每个渲染。它将继续从以前的值更新。但是，当您在数组中传递带有查找值的参数时，它将需要检查每个渲染，并且应用程序将继续从以前的值更新。

因此，当来回切换到不同的选项卡时，该应用程序将卸载并重新安装，并且它们之间的计算会稍微慢一些，因为它在渲染后检查值，但带有空数组将继续更新而没有任何校验。因此，您看到的useEffect缓存值检查之间的时间间隔变慢了。