ReactJS入門 -ReactHook: useEffect 與 useRef - 筆記長也NotesHazuya

ReactJS入門 -ReactHook: useEffect 與 useRef

2021-06-23 23:35:00   ReactJS

上一篇我們已經介紹過了 useState 這個 Hook,今天要介紹的是 useEffect 與 useRef 這兩個 hook。

useRef

因為下面會用到這個,所以先介紹 useRef。前面介紹的 useState 在改變時會觸發畫面重渲染,而 useRef 不會,而且 useRef 的值在元件生命週期下都會一直存在。

用法

const renderCount = useRef(0);  

useRef 只需要定義一個變數就好,而數值則會存在 current 這個屬性,例如:

console.log(renderCount.current)

這樣會印出0。如果要改變值,直接更改 current 即可,例如:

renderCount.current += 1;

這樣就可以把 renderCount 的值加一。

  1. useRef 通常用來做一些需要統計的事情(例如渲染次數、重渲染前的數值)
  2. 不能使用 useRef 來取代 useState,因為 useRef 被更改時不會觸發重渲染

useEffect

在 ClassComponent 我們提到了數個不同生命週期以及相關的函數,但是在 functionalComponent 當中沒有這些函數,同樣必須使用 hook 才能達到效果,要達到生命週期的幾個函數的效果就是要使用今天介紹的 useEffict 這個 hook。

基本語法

useEffect(() => {
    /* do somethings*/
}, []); 

函數本身有兩個參數,第一個是放要做的事情,要是一個函數的形式。第二個是設定哪些變數變動的時候,去做第一個參數要做的事情。

useEffect 在每次渲染(render)的時候都會被呼叫喔!

以 useEffect 代替各種生命週期函數

如果你還不知道什麼是生命週期函數,建議可以先去閱讀先前的文章:React 入門 - ClassComponent 生命週期函數

以 useEffect 代替 componentDidMount

useEffect(() => {

    /* componentDidMount */
    
}, []); 

第二個參數帶入空陣列(或是省略),也就是在元件被載入執行後,沒有其他情況會再觸發。

以 useEffect 代替 componentWillUnmount

useEffect(() => {
    /* componentDidMount*/
    return (() => {
      /* componentWillUnmount */
    });
    
}, []); 

componentWillUnmount 就是第一個參數中函數的 reutrn 值。

以 useEffect 代替 componentDidUpdate

const mount=useRef(true);
useEffect(()=>{
  if(mount.current===true){
    mount.current=false;
    
    /* componentDidMount*/

  }else{
    /* componentDidUpdate */
      }
},[]);

由於 useEffect 在第一次渲染必定會被執行,所以我們可以使用 useRef 來做是否第一次渲染的判斷,如果是第一次(true)那就是執行 componentDidMount,如果不是就是執行 componentDidUpdate。

mouut 不能使用 useState 來代替 useRef,因為 state 被改變的時候都會執行畫面重渲染,這樣會導致在設定 mount 的時候讓 useEffect 被執行第二次(就是 componentDidMount 與 componentDidUpdate 會被同時執行)。

一個 component 允許多個 useEffect

在同一個 functionalComponent 以及 customHook(自訂的Hook)可以允許多個 useEffect 存在,所以可以依照不同變數來去篩寫不同的 useEffect 條件。

結論

useState 以及 useEffect 是兩個非常常利用到的 hook,下一篇我們將持續介紹其他的 hook~

 

 

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)