React 筆記 | Hooks 速記:useState、useEffect、useRef

這次要筆記的是:

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

00_react hooks


1. useState

說明:

useState 用來新增並管理函式組件內的 state,透過 useState 所提供的「更新函式 ( 即 setState ) 」來更新 state,而當 state 更新後,React 就會重新渲染組件,以確保畫面上顯示的是最新的狀態

補充:一旦組件內的 state 更新,React 就會重新渲染該組件。如果傳給底下的子組件的 props 有改變的話,子組件也會重新渲染

寫法:

// 新增狀態
const [state, setState] = useState(initialState);

// 更新狀態
setState(newState);

範例:計算總和

count 的初始值為 0,按下按鈕後,總和會 +2

01_useState_code
01_useState_demo

2. useEffect

說明:

useEffect 用來監控某個狀態,一旦該狀態更新,會在組件渲染完成後,執行指定的函式內容

第一個參數:放要執行的函式,資料型別為「函式」

如果函式內有寫「消息訂閱 / 發布、計時器…等功能」,最好再寫個 return 把它們清除掉,以避免因為狀態更新而導致無窮迴圈

第二個參數:放要控管的狀態,資料型別為「陣列」,有以下三種寫法:

  • []:空陣列,useEffect 函式只會在組件「首次」掛載時執行一次
  • [監控的狀態]:當指定的狀態更新時,useEffect 函式會被執行
  • (無):不寫,任何狀態更新時,useEffect 函式會被執行

寫法:

useEffect(() => {
    // 執行內容
    
    return () => {
        // 清理邏輯(可選)
    };
}, [監控的狀態]);

範例:計時器

每隔一秒,總和就會+1

02_useEffect_code
02_useEffect_demo

3. useRef

說明:

useRef 用來抓取組件中的 DOM 元素節點,然後可對該節點去取 value 值、做 focus 聚焦、做 reset 清空值…等。還有另一個用途是儲存可變的資料,並且在更新時不會讓組件重新渲染

寫法:

const refContainer = useRef(initialValue);

範例:取出 DOM 元素節點的值

按下按鈕後,跳出視窗,顯示在輸入框所輸入的內容

03-1_useRef_code
03-1_useRef_demo

範例:儲存可變的資料而不觸發組件重新渲染

每次按下按鈕後,會透過 times 來紀錄次數,並且不會因為 times 更新而重新渲染組件

03-2_useRef_code
03-2_useRef_demo

參考:
React 官方文件-Hooks API
[學習筆記] React 內建的所有 Hooks 功能整理

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *