這次要筆記的是:
React Hooks
在這之前,先來了解什麼是 React Hooks?
React 的組件有分兩種,一種是「類式組件」、另一種是「函式組件」,我在初學 React 時,是從類式組件開始,在 React 還沒有引進 Hooks 的以前版本時,函數式組件因為本身沒有 this
,所以很多事無法做,像是組件的核心功能「Props ( 屬性 )、State ( 狀態 )、Ref ( 參考 )」中,就有兩個無法實現 ( State 和 Ref,它們需要 this ),所以那時的函式組件用處不大
Props ( 屬性 ) 可以參考 這篇
但是 … 但是 …
在 React 16.8 版本引進 Hooks 後,函式組件整個強大起來,從那時開始函式組件不只可以使用 State 和 Ref,並且在管理組件的狀態和生命週期上,都比類式組件好用簡單多了,所以現在已經很少人在用類式組件了
類式組件的生命週期真的是很多又混亂,還有新/舊生命週期之分,然後每個生命週期名稱還又臭又長,當初學時真的是頭腦昏脹,學完後發現現在幾乎用不到….呵,但不好用的東西被淘汰掉也是好事啦
以上就是 React Hooks 的原由,接下來才是要開始重點整理以下三種 Hooks
useState、useEffect、useRef
至於這麽多的 hooks,為什麼只挑這三種呢?因為我目前練習只有先用到這三種XD

快速尋找
1. useState
說明:
useState
用來新增並管理函式組件內的 state,透過 useState
所提供的「更新函式 ( 即 setState ) 」來更新 state,而當 state 更新後,React 就會重新渲染組件,以確保畫面上顯示的是最新的狀態
補充:一旦組件內的 state 更新,React 就會重新渲染該組件。如果傳給底下的子組件的 props 有改變的話,子組件也會重新渲染
寫法:
// 新增狀態
const [state, setState] = useState(initialState);
// 更新狀態
setState(newState);
範例:計算總和
count 的初始值為 0,按下按鈕後,總和會 +2


2. useEffect
說明:
useEffect
用來監控某個狀態,一旦該狀態更新,會在組件渲染完成後,執行指定的函式內容
→ 第一個參數:放要執行的函式,資料型別為「函式」
如果函式內有寫「消息訂閱 / 發布、計時器…等功能」,最好再寫個
return
把它們清除掉,以避免因為狀態更新而導致無窮迴圈
→ 第二個參數:放要控管的狀態,資料型別為「陣列」,有以下三種寫法:
- []:空陣列,
useEffect
函式只會在組件「首次」掛載時執行一次 - [監控的狀態]:當指定的狀態更新時,
useEffect
函式會被執行 - (無):不寫,任何狀態更新時,
useEffect
函式會被執行
寫法:
useEffect(() => {
// 執行內容
return () => {
// 清理邏輯(可選)
};
}, [監控的狀態]);
範例:計時器
每隔一秒,總和就會+1


3. useRef
說明:
useRef
用來抓取組件中的 DOM 元素節點,然後可對該節點去取 value 值、做 focus 聚焦、做 reset 清空值…等。還有另一個用途是儲存可變的資料,並且在更新時不會讓組件重新渲染
寫法:
const refContainer = useRef(initialValue);
範例:取出 DOM 元素節點的值
按下按鈕後,跳出視窗,顯示在輸入框所輸入的內容


範例:儲存可變的資料而不觸發組件重新渲染
每次按下按鈕後,會透過 times 來紀錄次數,並且不會因為 times 更新而重新渲染組件

