React useEffect的理解與使用

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

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

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

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

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

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

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

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

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

關于副作用的清除

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

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

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