时间戳

首页 > 解决方案 > react vs vanilla javascript中setInterval的不同行为

javascript - react vs vanilla javascript中setInterval的不同行为

问题描述

我一直在试验setInterval。这两个代码都是在 Chrome 中执行的。下面是我的反应组件

function App() {
  let [value, setValue] = useState(0);

  useEffect(() => {
    const id = setInterval(() => console.log(value), 1000);

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

  return (
    <div className="App">
      <p>{value}</p>

      <button onClick={() => setValue(value + 1)}>+</button>
      <button onClick={() => setValue(value - 1)}>-</button>
    </div>
  );
}

无论您通过按钮单击增加或减少值多少次console.log，setTimeout内部都会useEffect继续打印。0

以下代码正在浏览器（Chrome）控制台中执行

let value = 0;

setInterval(() => console.log(value), 1000);

value = 3; // can be considered as setValue (sort of)

现在浏览器控制台打印3出预期的结果。

我想知道为什么行为会有所不同，如果有人能指出原因，我将不胜感激。任何其他可以更好地证明这一点的代码片段或链接都会很棒。

标签： javascriptreactjssetintervalsetstate

解决方案

您需要value作为依赖项传递给您的 useEffect。除非你在依赖数组中给出你的效果依赖的项目列表，否则它将继续使用初始的value.

  useEffect(() => {
    const id = setInterval(() => console.log(value), 1000);

    return () => clearInterval(id);
  }, [value]);

推荐阅读