快捷導航

React useEffect的理解與使用

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

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

避免重復循環(huán)渲染

利用useEffect接收一個數(shù)組作為第二個參數(shù)，將第二個參數(shù)作為dependence，每次渲染完DOM執(zhí)行副作用函數(shù)時都會淺比較dependence渲染前后的值是否一致，不一致就執(zhí)行副作用，反之就不執(zhí)行；如果該dependence為一個空數(shù)組[]，即沒有傳入比較變化的變量，則比較結(jié)果永遠都保持不變，那么副作用邏輯就只能執(zhí)行一次。

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

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

畫動圖太麻煩，各位看注釋腦補😂

function App() {  const [count, setCount] = useState(0);  const [loading, setLoading] = useState(true); // loading作為開關(guān)  useEffect(() => {    if (loading) { // 注意這里只有當loading為true時才執(zhí)行      setTimeout(() => {        setCount(count + 1);        setLoading(!loading); // 改變loading值      });    }  }, [loading]); // loading在這里作為dependence
  // 第一次DOM渲染完成后，loading為true，執(zhí)行副作用函數(shù)，count值變?yōu)?，loading變?yōu)閒alse，由于
  // 改變了state的值，會update，組件會再次render，但此時loading為false，不會執(zhí)行setTimeout，
  // 避免了循環(huán)

  // 當點擊Refresh刷新，loading由上一次的false變?yōu)榱藅rue，函數(shù)執(zhí)行一次update
  // DOM更新完后執(zhí)行useEffect，因為loading已經(jīng)為true了，所以副作用函數(shù)可執(zhí)行，count從1變?yōu)?，
  // loading又從true變?yōu)閒alse，就這樣交替進行。。。
  return (    <div>      <h3>{count}</h3>      <button        onClick={() => {          setLoading(true);        }}      >        Refresh      </button>    </div>  );}

關(guān)于副作用的清除

useEffect可以返回一個函數(shù)來作為清除副作用。

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

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

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

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

每次副作用執(zhí)行都會返回一個清除函數(shù)
清除函數(shù)會在下一次副作用函數(shù)執(zhí)行之前（DOM渲染完成之后）執(zhí)行
組件銷毀也會執(zhí)行一次清除函數(shù)

從打印出的count值也可以看出，清除函數(shù)會在下一次副作用函數(shù)執(zhí)行之前執(zhí)行，即在清除函數(shù)里的count值是上一次緩存的count值：

進一步思考，clear1執(zhí)行的時候，訪問了props.id，那么這個id值是1還是2呢？

這里就涉及到閉包的知識概念了，因為useEffect返回的是個函數(shù)，在執(zhí)行時產(chǎn)生了一個閉包，根據(jù)閉包的相關(guān)定義，返回的clear函數(shù)能訪問自身作用域外的變量，當組件第一次渲染時傳入id=1，此時的clear函數(shù)中的props.id值為1。

以上就是React useEffect的理解與使用的詳細內(nèi)容，更多關(guān)于React useEffect的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: