快捷導(dǎo)航

React useEffect的理解與使用

更新時(shí)間：2021年04月19日 10:47:58 作者：RedCHr

這篇文章主要介紹了React useEffect的理解與使用，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下

避免重復(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è)變量作為“開(kāi)關(guān)”，在實(shí)現(xiàn)目的的同時(shí)做到避免循環(huán)渲染DOM。

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

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)作為清除副作用。

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

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

傳入props.id = 1
組件渲染
DOM渲染完成，執(zhí)行副作用函數(shù)，返回清除副作用函數(shù)clear，命名為clear1
傳入props.id=2
組件渲染
DOM渲染完成，執(zhí)行clear1
副作用函數(shù)執(zhí)行并返回另一個(gè)clear函數(shù)，命名為clear2
組件銷(xiāo)毀，clear2執(zhí)行

由此可推測(cè)出副作用清除函數(shù)的特征：

每次副作用執(zhí)行都會(huì)返回一個(gè)清除函數(shù)
清除函數(shù)會(huì)在下一次副作用函數(shù)執(zhí)行之前（DOM渲染完成之后）執(zhí)行
組件銷(xiāo)毀也會(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)文章！

您可能感興趣的文章: