課程
/前端開(kāi)發(fā)
/React.JS
/React Hooks2小時(shí)快速入門(mén)
有點(diǎn)抄文檔的感覺(jué)啊 花了錢(qián)的? 感覺(jué)細(xì)節(jié)講的不是很深入 講的不是很深入 例如 useRef那一節(jié)為什么不用ref就會(huì)獲取不到值
2020-11-21
源自:React Hooks2小時(shí)快速入門(mén) 3-8
正在回答
好吧,為了彌補(bǔ),就在這里做回答吧,先看下代碼實(shí)現(xiàn)
const?[num,?setNum]?=?useState(1) let?timer //?第一個(gè)effect useEffect(()?=>?{ ??timer?=?setInterval(()?=>?{ ????console.log(1111); ????setNum(num?+?1) ??},?400) },?[]) //?第二個(gè)effect useEffect(()?=>?{ ??console.log(num,?timer); },?[num]) return?( ??<div?className="App"> ????{num} ??</div> );
第一個(gè)effect在更新渲染的時(shí)候,并沒(méi)有依賴(lài)num參數(shù),也就是只執(zhí)行一次就結(jié)束了,但是每次更新num的時(shí)候,當(dāng)前組件是要刷新的,timer也會(huì)重新生成一個(gè),此時(shí)的timer只是undefined,并沒(méi)有賦值的過(guò)程(第一個(gè)effect不執(zhí)行了)。第一次給timer賦值之后,剩下的所有更新里,timer都是undefined。所以在第二個(gè)effect里獲取和清空timer,只能獲取到undefined。
如果還有不明白,歡迎再次提問(wèn)。?
舉報(bào)
React Hooks 入門(mén)的不二之選
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2021-06-06
好吧,為了彌補(bǔ),就在這里做回答吧,先看下代碼實(shí)現(xiàn)
第一個(gè)effect在更新渲染的時(shí)候,并沒(méi)有依賴(lài)num參數(shù),也就是只執(zhí)行一次就結(jié)束了,但是每次更新num的時(shí)候,當(dāng)前組件是要刷新的,timer也會(huì)重新生成一個(gè),此時(shí)的timer只是undefined,并沒(méi)有賦值的過(guò)程(第一個(gè)effect不執(zhí)行了)。第一次給timer賦值之后,剩下的所有更新里,timer都是undefined。所以在第二個(gè)effect里獲取和清空timer,只能獲取到undefined。
如果還有不明白,歡迎再次提問(wèn)。?