在执行setInterval时在React中使用prevState



有人能给我关于这个话题的答案吗
如果我尝试以正确的方式(包括清理和所有内容(执行间隔

const [count,setCount] = useState(0)
useEffect(() => {
const interval = useInterval(() => setCount((count) => count + 1),1000);
() => clearInterval(interval)
},[])

我知道我不能放:

const interval = useInterval(() => setCount(count + 1),1000);

我必须使用(count) => count + 1,以前的值,但为什么是这样?我无法理解它?

如果我的计数是count = 0,如果我不使用prevState,为什么它总是循环到1
即使我使用setCount(count + 1,state也不应该在组件更改时重新渲染组件吗?所以一旦它变为1,就重新渲染,然后状态为1,这样interval就可以再次向它添加+1。

传递给useInterval的函数(或在渲染中定义的任何闭包(将始终"参见";它在其中定义的渲染的状态。当您调用状态设置器时,该值也不会立即更改,这会在刚刚触发的下一个渲染中发生。当您创建该函数时,您(不知不觉地,但这只是JS语义(将该函数绑定到第一次定义该函数时恰好存在的当前计数值。记忆中的某个地方,

你可能会想,为什么在其他地方你不这样做,这很好,这可能是因为setter是在一个函数中调用的,该函数也在渲染中重新创建,所以它在技术上避免了需要它(尽管如果它是从值派生的,为了防止gotchas,你应该总是这样做(。当这种情况发生时,上一次渲染中的旧函数将被装箱,并替换为绑定到新范围的新函数。

但在这里,这种影响只记录一次,这将在组件第一次加载时发生。现在,() => setCount(count + 1)在词法上绑定到初始渲染中的count值。这是0,所以它每次都计算为0 + 1 = 1。在第一次渲染时,浏览器内存深处的某个位置存储了() => setCount(count + 1),并硬连接到静态计数值。

为了解决这个问题,React可以接受您概述的回调模式。在React内部,它将最新的值传递给它,因此在中定义函数的呈现方式变得无关紧要。

最新更新