2 回答

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊
setColor
是一個(gè)改變color
狀態(tài)的函數(shù)。它不會(huì)直接更改color
變量。
每次狀態(tài)改變時(shí)App
函數(shù)都會(huì)重新運(yùn)行。
因此,當(dāng)它第一次運(yùn)行時(shí)useState("red")
,它調(diào)用 ,發(fā)現(xiàn)不存在現(xiàn)有狀態(tài),將狀態(tài)設(shè)置為"red"
然后將狀態(tài) ( "red"
) 分配給color
。DOM 將根據(jù)結(jié)果進(jìn)行更新。
setColor("blue");
"blue"
更改導(dǎo)致App
再次運(yùn)行的狀態(tài)。已經(jīng)存在一個(gè)狀態(tài),因此color
設(shè)置為"blue"
。它不是用 初始化的"red"
。DOM 將根據(jù)結(jié)果進(jìn)行更新。
一秒鐘后,超時(shí)解決并將setColor("purple");
顏色設(shè)置為"purple"
導(dǎo)致再次App
運(yùn)行的狀態(tài)。已經(jīng)存在一個(gè)狀態(tài),因此設(shè)置為。color
"purple"
每次更新 DOM 時(shí),它都會(huì)revealColor
傳遞一個(gè)新函數(shù),onClick
該函數(shù)已關(guān)閉color
最近調(diào)用的變量App
。
同時(shí),您傳遞給的函數(shù)useEffect
僅運(yùn)行一次(因?yàn)槟?code>[]作為第二個(gè)參數(shù)傳遞),因此color
它關(guān)閉的變量是原始變量,您將"red"
在那里記錄。

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超10個(gè)贊
這是因?yàn)槟銢](méi)有包含color在 的依賴數(shù)組中useEffect。因此,useEffect不知道已經(jīng)color改變。如果將其包含在依賴項(xiàng)數(shù)組中,則每當(dāng)更改useEffect時(shí)都會(huì)觸發(fā)。color因此,您blue登錄時(shí)就可以看到。
useEffect(() => {
setColor("blue");
setTimeout(() => {
console.log(color);
setColor("purple");
}, 1000);
}, [color]); // <- dependency array
添加回答
舉報(bào)