useState 算是比較被常使用的React hook函式之一,如字面上的意思,它就是要拿來去管理元件內部的狀態,在未使用React hook時,原本React 在狀態的管理上是使用class component 的寫法,如下圖所示

未使用useState時

1. 透過constructor(props){super(props),this.state = {}}的這個語法來建立建構函式,

2. 在建構函式裡會有一個屬性參數props,它是用來傳上層屬性的用的,

3. 然後呼叫父類別的建構式super,把屬性的參數props傳遞進去

4. 使用this.state = {}裡面去定義元件的初始狀態或初始值,幫我們的component新增一個state屬性,後面給它一個空白的物件{},這裡的用意就是初始化我們組件為空白的物件,也就是說空白的物件{}放進this.state裡面,另外也可以初始化有帶資料的物件

5. 自訂義事件函式,以此為例定義一個onClick事件後將counter+1,因此必須在定義的事件函式裡加入this.setState({新的狀態}); 這段語法,因此我們把counter:this.state.counter+1塞入到新的狀態裡去更新狀態

useState 基本用法

如上面描述,這是在未使用React hook情形下管理狀態時的做法,我個人認為程式撰寫上並不是這麼直觀,那如果今天改成React hook的寫法呢,

1. 首先先把class component的寫法改為function component的寫法(因為重點在return的值)

2. Import React 內建的元件 useState,它是用來存儲及改變元件狀態的函式

3. 用一個陣列去定義useState(初始狀態),這個初始狀態它可以是任何的型式,然後useState()它會回傳一個array給我們定義的陣列,如圖所示,

  • 第一個回傳的counter它會存useState所給定的初始值
  • 第二個回傳setCounter的是你設定的這個狀態的函式,它可以用來改變第一個回傳的值(counter),setCounter在寫法上有兩種,如圖所示,第一種是可以在setCounter()裡傳入一個fucntion(),function裡可以帶入一個舊的state為參數,然後做完運算後再return新的state出去;第二種則是比較直觀的方式,則是直接在setCounter()裡帶直將舊的state帶進去然後直接運算回傳

4. 我們可以定一個變數來接setCounter()所回傳的值

5. 直接把定義的useState裡的參數放到要呈現及控制的位置

useState()進階用法

由於useState()它會回傳一個陣列,一個是初始狀態的變數,另一個是可以改變狀態的函式,剛上面有提到初始狀態的變數不限任何型式,它也可以是物件,這樣我們就可以透過useState去控制多個變數,以下圖為例,

1. 一次帶入counter1:1 及counter2:2的物件進去

2. 在前面的地方也用物件的方式去接回傳的狀態

3. 這邊有個地方要注意的是setState()裡所帶入的舊state,由於帶進來的舊state是一個身件,所以要用展開的方式(…state)把它跟setState()的函式合併在一起,這樣我們才能使用舊state所帶進來物件裡的參數

4. 舊state物件和setState()合併後,即可使用舊state裡的物件參數,再針對其運算後後即可返回新的state出去

5. 所以透過帶入物件進useState()的方式,就可以用一個useState()一次去控制多個變數

總結

React Hook基本上就是用React官方內建的函式來控制元件的狀態,它的概念就是要把函式抽像化讓開發的人方便使用,而透過函式呼叫就可以控制元件狀態,在程式撰寫上也比較直觀