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

Posted 2023-02-23

【中文标题】React Hook 实现导致并排计数变慢

【英文标题】：React Hook Implementation causes slower count sidebyside

【发布时间】：2020-03-09 03:33:10

【问题描述】：

当第一个功能组件在 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 的依赖数组包括count，这意味着每次更改时都会运行整个效果设置/拆卸。在每个setCount 你setInterval 和clearInterval 之后。

【参考方案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>;

【参考方案2】：

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

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