1.3.1 useState

useState是一個與狀態管理相關的Hooks，能讓函數組件擁有狀態，是最常用的Hooks之一，類型定義如下。

從類型定義可以看出，useState有兩個重載，分別是傳參數和不傳參數。不論是否傳參數，useState都返回一個長度為2的數組。數組的第一個位置是狀態，可以是任何數據類型，類型參數S用于注釋它的類型；第二個位置是一個用于更新狀態的函數，為了方便介紹本小節將該函數記為setState。

接下來介紹useState的基本用法。

1.useState的參數不是函數

此時，useState的參數將作為狀態的初始值，如果沒有傳參數，那么狀態的初始值為undefined。用法如下。

UseStateWithoutFunc組件有name和age這兩個狀態，name只能是string類型，初始值為'何遇'，age的數據類型是number或undefined，初始值為undefined。

2.useState的參數是函數

此時，函數的返回值是狀態的初始值。某些時候，狀態的初始值要經過計算才能得到，此時推薦將函數作為useState的參數，該函數只在組件初始渲染時執行一次。用法如下。

上述useState的參數是函數，該函數的返回值是count的初始值。

3.修改狀態的值

沿用上述代碼中的setCount，修改狀態有兩種方式，具體如下。

如果setCount的參數是函數，那么count現在的值將以參數的形式傳給該函數，函數的返回值用于更新狀態。如果setCount的參數不是函數，那么該參數將用于更新狀態。狀態值發生變更將導致組件重新渲染，重新渲染時，useState返回的第一個值始終是狀態最新的值，不會重置為初始值。

目前已經介紹完useState的基本用法，觀察代碼清單1-1所示代碼，分析瀏覽器打印的結果。

代碼清單 1-1

如果你理解1.1節中講的知識，那么一定能輕而易舉地分析出瀏覽器打印的值是0而不是1，這是因為在函數組件中取state和props拿到的都是本次渲染的值，在本次渲染范圍內，props和state始終不變。

在代碼清單1-1中調用setCount會導致組件重新渲染，在下一次渲染時count的值為1，但console.log（count）打印的是本次渲染時count的值，所以結果為0。