setInterval在react和vanilla javascript中的不同行为

Question

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

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

setTimeout中的console.log在useEffect中保持打印0，无论您通过点击按钮增加或减少多少次值。

下面的代码正在浏览器(Chrome)控制台执行

let value = 0;
setInterval(() => console.log(value), 1000);
value = 3; // can be considered as setValue (sort of)

现在浏览器控制台打印3，这是预期的。

我想知道为什么在行为上有差异，如果有人能指出原因，我将不胜感激。如果有其他代码片段或链接能更好地说明这一点，那就更好了。

Answer 1

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

useEffect(() => {
const id = setInterval(() => console.log(value), 1000);
return () => clearInterval(id);
}, [value]);

Answer 2

İn您的示例useEffect只在页面加载时工作一次。这就是为什么您只得到console.log(0)。如果你想让它在值改变时生效你需要在useEffect

中指定例如

UseEffect(() =>{ console.log(value) }, [value])

在你的例子中，当你点击按钮，第一个值设置之后，useEffect工作，setInternals函数触发后15。