上一篇我們已經介紹過了 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 值。

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～