ReactJS:为什么一个状态的值不同?

Question

所以我正在用非常基本的组件进入Reactjs。 我正在从不同的函数注销相同的状态，但我看到的是不同的值。

import React, { useState, useEffect, useRef } from "react";
const Test = props => {
const [count, setCount] = useState(0);
useEffect(()=>{
setInterval(() => {
console.log("count in interval is:", count);
}, 1000);
},[props]);
function btnClick() {
const newCount = count + 1;
setCount(newCount);
console.log("count changed to: ", newCount);
}
return (
<div>
count is {count}
<br></br>
<button onClick={btnClick}>+</button>
</div>
);
};
export default Test;

点击并等待一些后输出，日志为：

Test.js:8 count in interval is: 0
Test.js:15 count changed to:  1
Test.js:15 count changed to:  2
Test.js:15 count changed to:  3
Test.js:15 count changed to:  4
(8 rows) Test.js:8 count in interval is: 0

我希望两个函数中的"计数"相同。 谁能解释一下？

非常感谢。

Answer 1

Test只有一个setInterval函数，其中count总是0。因为它仅在初始渲染期间创建。

它从未创建过另一个setInterval，因为从未以[props]作为依赖项触发效果。

要在每次重新渲染时更改setInterval的计数，请执行以下操作：

• 删除依赖项
• 返回效果内部的清理函数

useEffect(
() => {
const t = setInterval(() => {
console.log("count in interval is:", count);
}, 1000);
return () => clearInterval(t); // cleanup on every re-render
}
// no dependency: effect runs on every re-render
);

但是上面的代码会有一个警告：

">缺少count依赖">

因此，只需将count添加为依赖项，即可仅在count更改时运行效果。

useEffect(
() => {
const t = setInterval(() => {
console.log("count in interval is:", count);
}, 1000);
return () => clearInterval(t); // cleanup "old" setInterval
}
, [count] // ony run effect every time count changes
);

Answer 2

count的值不会改变，这是预期的行为，尽管不是很明显的行为。

看，你甚至将count声明为const count，它是不可变的。相反，正在发生的事情是在第一次渲染期间count获得分配的值0.count的值永远不会改变，相反，每次更改状态时都会调用组件Test，并且函数useState为常量count分配不同的值，每次都是新的常量。

因此，在第一次渲染期间，const count的值通过setInterval调用的函数内部的闭包来捕获，并且该值永远保持0。