ReactJS入門 - ReactHook: useState - 筆記長也NotesHazuya

ReactJS入門 - ReactHook: useState

2021-06-20 00:07:00   ReactJS

ReactHook是什麼?

在早期版本的 React 當中,如果想讓元件擁有 state 只能使用 classComponent ,而 ReactHook的出現使得 functionalComponent 也可以具有 state 的特性。

依據目前寫文章之時,官方網站總共列出了 10 種 Hook,不過在入門系列當中我們只會介紹到下列幾種:

  • useState
  • useEffict
  • useRef
  • useContext

useState

本篇要介紹的是 useState 這個 hook,基本上可以把這個 hook 當作 classComponent 當中的 setState,但在 hook 上的使用方式不太一樣。

宣告

const [ state 名稱, setState 函數名稱] = useState(初始值);

第一個帶入  state 的名稱,相當於 classComponent 的 this.state.名稱。第二個則是 setState 函數的名稱,相當於 classComponent 中的 this.setState({ state名稱:數值 })。第二個名稱通常以 set 開頭,但並沒有硬性規定。

讀取

讀取十分容易,直接使用 state 的名稱就能取得值,例如我們這樣宣告 staet:

const [percent, setPercent] = useState(0);

直接使用 percent 就可以取得值,例如想要在主控台(F12)印出 percent 的值:

console.log(percent)

這樣就會印出 0。

更新

更新只要形式呼叫第二個命名的函數即可,例如上面將函數命名為 setPercent ,只要這樣就能更新 percent 的值:

setPercent(20)

這樣 percent 的值就會被改為 20。

useState 事實上只是一個 function,回傳一個 state 的值跟一個 setState 的函式。上面的宣告方式是透過解構賦值的方式來接收回傳的兩個參數。

使用限制

useState 以及其他的 ReactHook 有一些宣告的限制:

  • 不能在 if-else 結構中宣告
  • 不能在 for-loop 中宣告
  • 不能在 functionalComponent 中宣告的 function 中宣告

這是由於 hook 的運作方式是藉由有順序的索引值來對應每次宣告的 hook,例如我今天有下面三個 state:

useState(0)
useState(1)
useState(2)

而 react 會照著這三個順序去對應 state,像是這樣:

[0]->useState(0)
[1]->useState(1)
[2]->useState(2)

如果今天將第二個 state 放在 if 當中:

useState(0)
if(false)
  useState(1)
useState(2)

react 在對應的時候就會變成這樣:

[0]->useState(0)
     useState(1)
[1]->useState(2)

原本應該是 1 的位置變成了 2 ,這樣就會使得 state 指向了錯誤的位置。

練習

在“React 入門 - ClassComponent 中使用 state ”一文之中曾經用過 classComponent 來做過一個簡單的 state 範例,可以試著改用 functionalComponent 來改寫看看,基本上就是將 class 改為宣告 function ,然後去除原先的建構子,並透過上面的方式宣告 state,最後在讀取 state 的時候不用再使用 this 關鍵字,大概掌握這些點就能熟悉 functionalComponent 了。

結論

本篇介紹了基本的 useState 使用方式以及其限制,有人會覺得為什麼不使用 classComponent 就好了?原因就是這種寫程式的方式更為精簡,不必遵循物件導向的語法,例如不必有建構子、不必繼承 Component 父類別、不需使用 this 關鍵字等,這些使得程式碼變得更短更精簡,因此 ReactHook 顯然成為了今日社群大力推廣的寫法。

我自己也是相當喜歡這樣的寫法,尤其在細小的元件可以省去很多行的程式碼,也能讓程式碼更精簡。

在下一篇文章當中我們會繼續介紹 useRef 以及 useEffict 這兩個 hook。 

關於作者


長也

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