useEffect react 和 setInterval 的交互答案

【问题标题】：Interaction between useEffect react and setIntervaluseEffect react 和 setInterval 的交互
【发布时间】：2022-01-22 18:43:53
【问题描述】：

我很难理解 useEffect 的工作原理。就像下面的代码， setInterval 中的 count1 将始终为 0，并且 useEffect 永远不会到达 count2。这意味着，在第一次渲染之后，useEffect 运行并且它进入 setInterval 并且永远不会离开，那么 h1 中的计数如何仍然得到更新？如果它永远不会脱离 useEffect。我认为状态更改总是会触发重新渲染，从而触发另一个 useEffect。也许我错过了一些东西。请帮忙。谢谢！

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

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

  useEffect(() => {
    setInterval(() => {
      setCount((count) => count + 1);
      console.log("count1" + count);
    }, 1000);
    console.log("count2" + count);
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

export default Timer;

【问题讨论】：

看看这个stackoverflow.com/questions/57542264/…
有很多重复的stackoverflow.com/questions/65489257/react-setinterval-behavior/…

标签： reactjs state setinterval use-effect

【解决方案1】：

这里要注意的重要一点是count 是一个本地变量。

每次调用Timer 函数时，它都有一个属于该调用的新count 变量（由useState 分配一个值。

第一次调用 Timer 函数时，useEffect 运行并且传递给 setInterval 的箭头函数在该 @ 实例周围形成一个闭包 987654328@.

因此，每次间隔滴答作响时，它都会记录相同的 count 值。

同时传递给setCount的回调函数从状态中获取count的最新值，因此可以在那里递增。

如果您刚刚完成：setCount(count + 1);，那么您将阅读关闭的 count 并不断将其设置为 0 + 1。

在Timer 被调用时，它有一个新 count，最新值存储在状态中。

【讨论】：

【解决方案2】：

你应该解决的问题：

您在 useEffect 中使用了 count 变量，但您没有将它放在钩子的依赖数组中，这样您的 console.log 将始终显示旧值。
您没有清除间隔，您正在泄漏资源： How to setInterval for every 5 second render with React hook useEffect in React Native app?

【讨论】：