今天終於要介紹 React hooks 中的第一個hook 了 - useState，Start!

建立自己的 component

在講解 state 概念與 useState 以前，首先先來建造自己的客製化 component

在src資料夾創建名為 components 的資料夾，用來放置我們自己寫的可重複利用的 component，接著新增名為Counter.js 的檔案，一般 component 的檔案有個命名傳統是第一個字母要大寫，因為當在 JSX 引入 component 時，為了與 HTML tag 做區隔，因此 componemt 必須以大寫開頭才會被吃到。

在 Counter.js 中撰寫以下程式碼：

我們將利用這個 component 學習 state 的用法，不過在這之前需要先讓頁面可以顯示我們的 component，注意到上圖中第11行程式把 Counter 這個 component export 出去，如此一來我們便可以在其他 component 中引入這個元件。

切換到 App.js 中引入 Counter component 並且放到頁面中呈現：

特別注意 這個寫法，若 component 沒有要包覆其他元件，則必須 self-closing。

回到我們的網頁中應該會看到這樣的頁面

State 是什麼？

state 可以想像成是 component 內部的變數，可以用來控制 component 內部元件的顯示狀態，不同於下一章要介紹的由父層傳下來的 props ，state 只能在 componenet 內部使用，或是傳給子 component 讓它當成 props 使用。

舉幾個實際上會應用的例子，讓沒接觸過state的人更能夠理解：

• state 為一個布林值，如果是 true 就顯示一段文字，如果是 false 就不顯示。
• state 為一個數字，例如待會的counter範例
• state 為一個 array，用來存取從API抓到的資料

除此之外，state 的一個特點是：**state改動後會觸發 component 的 re-render **，因此在使用上要謹慎，這也延伸出許多效能優化的技巧，在之後的篇章也會介紹到。

useState

在過去只有寫成 class 形式的 component 可以使用 state，幸虧 React hooks 的出現，讓我們能用更精簡的程式碼在使用 function 建構的component中使用 state。馬上來看看語法吧~

const [counter, setCounter] = useState(0);

這邊使用到 array 的解構語法，也就是將 useState 回傳的 array 中的值個別取出來，counter 為 state 變數，setCounter 則是負責改變 state 變數的函式，一般命名傳統習慣將此函式命名為 set+state 變數名稱，需要特別注意的是更改state一律只能透過set函式更改，useState所帶的參數為這個 state 的初始值，而一個component中可以有不只一個state。

直接用範例展示一下，今天使用最簡單的例子讓大家方便理解，頁面中會顯示一個數字，另外會有一個按鈕，點擊按鈕一次頁面中的數字也會往上加一，很簡單，卻也是讓人能夠輕易理解觀念的例子，start!

Counter.js：

首先必須先把 useState 引入進來，接著使用 useState 定義 count 變數，並把初始值設為 0 ，接著加入 button，並給予按鈕一個 click 事件，當點擊時就呼叫 setCount，特別注意 setCount 吃的參數值將成為count 變數的新值。剛剛也有說過不能對 count 直接做更動，因此若是寫成setCount(count++)是會報錯的。

現在我們的簡易 counter 應該就能夠運作了，今天第一個 hook - useState 的介紹就到這邊，明天將繼續為大家解說另一種狀態 - props。