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í)行一次。

useEffect(() => {
  setTimeout(() => {    
        setCounter(counter + 1);  
    }, 300)
}, []);

初此之外，如果我們還想通過(guò)點(diǎn)擊刷新按鈕實(shí)現(xiàn)獲取外部數(shù)據(jù)但又不想造成死循環(huán)，那么可以通過(guò)一個(gè)變量作為“開關(guān)”，在實(shí)現(xiàn)目的的同時(shí)做到避免循環(huán)渲染DOM。

畫動(dòng)圖太麻煩，各位看注釋腦補(bǔ)😂

function App() {  const [count, setCount] = useState(0);  const [loading, setLoading] = useState(true); // loading作為開關(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)作為清除副作用。

  useEffect(() => {    
    ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);  
    function clear(){
        ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);
    }  
    return clear;
});

這里會(huì)涉及到useEffect執(zhí)行和銷毀的過(guò)程：

1. 傳入props.id = 1
2. 組件渲染
3. DOM渲染完成，執(zhí)行副作用函數(shù)，返回清除副作用函數(shù)clear，命名為clear1
4. 傳入props.id=2
5. 組件渲染
6. DOM渲染完成，執(zhí)行clear1
7. 副作用函數(shù)執(zhí)行并返回另一個(gè)clear函數(shù)，命名為clear2
8. 組件銷毀，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)注腳本之家其它相關(guān)文章！