React16.8新增的useEffec這個(gè)hook函數(shù)就是處理副作用的。
所謂的“副作用”，舉個(gè)通俗一點(diǎn)的例子，假如感冒了本來(lái)吃點(diǎn)藥就沒(méi)事了，但是吃了藥發(fā)現(xiàn)身體過(guò)敏了，而這個(gè)“過(guò)敏”就是副作用。
放到React中，本來(lái)只是想渲染DOM展示到頁(yè)面上，但除了DOM之外還有數(shù)據(jù)，而這些數(shù)據(jù)必須從外部的數(shù)據(jù)源中獲取，這個(gè)“獲取外部數(shù)據(jù)源”的過(guò)程就是副作用。
useEffect怎么用可以參考官網(wǎng)給出的例子，這里主要針對(duì)使用useEffect過(guò)程中遇到的問(wèn)題進(jìn)行總結(jié)。
避免重復(fù)循環(huán)渲染
利用useEffect接收一個(gè)數(shù)組作為第二個(gè)參數(shù)，將第二個(gè)參數(shù)作為dependence，每次渲染完DOM執(zhí)行副作用函數(shù)時(shí)都會(huì)淺比較dependence渲染前后的值是否一致，不一致就執(zhí)行副作用，反之就不執(zhí)行；如果該dependence為一個(gè)空數(shù)組[]，即沒(méi)有傳入比較變化的變量，則比較結(jié)果永遠(yuǎn)都保持不變，那么副作用邏輯就只能執(zhí)行一次。
|
1
2
3
4
5
|
useEffect(() => { setTimeout(() => { setCounter(counter + 1); }, 300)}, []); |
初此之外，如果我們還想通過(guò)點(diǎn)擊刷新按鈕實(shí)現(xiàn)獲取外部數(shù)據(jù)但又不想造成死循環(huán)，那么可以通過(guò)一個(gè)變量作為“開(kāi)關(guān)”，在實(shí)現(xiàn)目的的同時(shí)做到避免循環(huán)渲染DOM。
畫(huà)動(dòng)圖太麻煩，各位看注釋腦補(bǔ)
|
1
2
3
4
5
6
7
8
9
|
function App() { const [count, setCount] = useState(0); const [loading, setLoading] = useState(true); // loading作為開(kāi)關(guān) useEffect(() => { if (loading) { // 注意這里只有當(dāng)loading為true時(shí)才執(zhí)行 setTimeout(() => { setCount(count + 1); setLoading(!loading); // 改變loading值 }); } }, [loading]); // loading在這里作為dependence // 第一次DOM渲染完成后，loading為true，執(zhí)行副作用函數(shù)，count值變?yōu)?，loading變?yōu)閒alse，由于 // 改變了state的值，會(huì)update，組件會(huì)再次render，但此時(shí)loading為false，不會(huì)執(zhí)行setTimeout， // 避免了循環(huán) // 當(dāng)點(diǎn)擊Refresh刷新，loading由上一次的false變?yōu)榱藅rue，函數(shù)執(zhí)行一次update // DOM更新完后執(zhí)行useEffect，因?yàn)閘oading已經(jīng)為true了，所以副作用函數(shù)可執(zhí)行，count從1變?yōu)?， // loading又從true變?yōu)閒alse，就這樣交替進(jìn)行。。。 return ( <div> <h3>{count}</h3> <button onClick={() => { setLoading(true); }} > Refresh </button> </div> );} |
關(guān)于副作用的清除
useEffect可以返回一個(gè)函數(shù)來(lái)作為清除副作用。
|
1
2
3
4
5
6
7
|
useEffect(() => { ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange); function clear(){ ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange); } return clear;}); |
這里會(huì)涉及到useEffect執(zhí)行和銷毀的過(guò)程：
- 傳入props.id = 1
- 組件渲染
- DOM渲染完成，執(zhí)行副作用函數(shù)，返回清除副作用函數(shù)clear，命名為clear1
- 傳入props.id=2
- 組件渲染
- DOM渲染完成，執(zhí)行clear1
- 副作用函數(shù)執(zhí)行并返回另一個(gè)clear函數(shù)，命名為clear2
- 組件銷毀，clear2執(zhí)行
由此可推測(cè)出副作用清除函數(shù)的特征：
- 每次副作用執(zhí)行都會(huì)返回一個(gè)清除函數(shù)
- 清除函數(shù)會(huì)在下一次副作用函數(shù)執(zhí)行之前（DOM渲染完成之后）執(zhí)行
- 組件銷毀也會(huì)執(zhí)行一次清除函數(shù)
從打印出的count值也可以看出，清除函數(shù)會(huì)在下一次副作用函數(shù)執(zhí)行之前執(zhí)行，即在清除函數(shù)里的count值是上一次緩存的count值：
進(jìn)一步思考，clear1執(zhí)行的時(shí)候，訪問(wèn)了props.id，那么這個(gè)id值是1還是2呢？
這里就涉及到閉包的知識(shí)概念了，因?yàn)閡seEffect返回的是個(gè)函數(shù)，在執(zhí)行時(shí)產(chǎn)生了一個(gè)閉包，根據(jù)閉包的相關(guān)定義，返回的clear函數(shù)能訪問(wèn)自身作用域外的變量，當(dāng)組件第一次渲染時(shí)傳入id=1，此時(shí)的clear函數(shù)中的props.id值為1。
以上就是React useEffect的理解與使用的詳細(xì)內(nèi)容，更多關(guān)于React useEffect的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6952436447144050725
