const [first, set_first] = useState(false);
const [is_mobile, set_is_mobile] = useState(false);
useEffect(() => {
if (!first) {
window.scrollBy({ top: is_mobile ? -180 : -195 });
}
}, [first]);
is_mobile
不是useEffect
的依赖项的一部分,而是其回调的一部分。这是否可能造成不一致?
例如,
is_mobile
已更改useEffect
未击发first
已更改。useEffect
是否使用is_mobile
的过期值
1条答案
按热度按时间zzlelutf1#
简短回答:没有。
长回答:
React by it-self不包含魔法,也不修改JS语言,它只是使用它。让我们以实际为例:
先说一般概念:
useState
将返回当前值(如果没有人存在,则初始化为给定的initialValue
或undefined
),该当前值是常数btw,以及setter函数。useEffect
将接受回调并执行它,如果给定的依赖性数组与前一次执行时(并且总是第一次调用它)有“浅的不同”。好了,现在我们已经清楚了基本概念,让我们考虑一下你想要修改一个状态,你调用它的setter函数:
这个函数是由React提供的,所以我们不知 prop 体会发生什么,但我们可以想象:
1.它再次调用组件函数:是“重新渲染”。
在这个新的渲染器上,调用了完全相同的
useState()
指令(这就是为什么总是以相同的顺序调用它们是如此重要),但是它返回新的值和相同的setter函数。其他状态没有改变,所以为它们返回相同的值。也调用了
useEffect
,但依赖关系数组相同(first
值未更改),因此忽略回调。但是,如果调用了回调,则回调具有is_mobile
的更新值。现在,您决定更新第二个状态
set_first(true)
。再次触发重新呈现,并发生完全相同的过程。第一个useState
返回最新的first
状态,第二个useState
返回“不是新的但仍然是最新的”is_mobile
状态。然后,调用useEffect
,传递给它的回调函数总是有两个最新的值,但是这次,因为first
的值发生了变化,所以React调用了回调函数,并且回调函数有所有最新的值。总结如下:
useEffect
的依赖项控制何时调用回调,但其中使用的每个值始终是最新的。我希望这是清楚的,并满足您对React状态和效果的理解!)