上一篇我們已經介紹過了 useState 這個 Hook,今天要介紹的是 useEffect 與 useRef 這兩個 hook。
因為下面會用到這個,所以先介紹 useRef。前面介紹的 useState 在改變時會觸發畫面重渲染,而 useRef 不會,而且 useRef 的值在元件生命週期下都會一直存在。
const renderCount = useRef(0);
useRef 只需要定義一個變數就好,而數值則會存在 current 這個屬性,例如:
console.log(renderCount.current)
這樣會印出0。如果要改變值,直接更改 current 即可,例如:
renderCount.current += 1;
這樣就可以把 renderCount 的值加一。
- useRef 通常用來做一些需要統計的事情(例如渲染次數、重渲染前的數值)
- 不能使用 useRef 來取代 useState,因為 useRef 被更改時不會觸發重渲染
在 ClassComponent 我們提到了數個不同生命週期以及相關的函數,但是在 functionalComponent 當中沒有這些函數,同樣必須使用 hook 才能達到效果,要達到生命週期的幾個函數的效果就是要使用今天介紹的 useEffict 這個 hook。
useEffect(() => {
/* do somethings*/
}, []);
函數本身有兩個參數,第一個是放要做的事情,要是一個函數的形式。第二個是設定哪些變數變動的時候,去做第一個參數要做的事情。
useEffect 在每次渲染(render)的時候都會被呼叫喔!
如果你還不知道什麼是生命週期函數,建議可以先去閱讀先前的文章:React 入門 - ClassComponent 生命週期函數
useEffect(() => {
/* componentDidMount */
}, []);
第二個參數帶入空陣列(或是省略),也就是在元件被載入執行後,沒有其他情況會再觸發。
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 會被同時執行)。
在同一個 functionalComponent 以及 customHook(自訂的Hook)可以允許多個 useEffect 存在,所以可以依照不同變數來去篩寫不同的 useEffect 條件。
useState 以及 useEffect 是兩個非常常利用到的 hook,下一篇我們將持續介紹其他的 hook~
關於作者
粉絲專頁
文章分類