今天的主題是 React 裡的 State，他會用在我們跟 Component 進行互動時，像是輸入資料（Input）、點擊顯示與隱藏按鈕（Click）或是選取下拉式選單（Select）等。當我們在進行這些互動時會想紀錄一些資料，像是當前輸入的內容，點擊哪個按鈕等，State 就可以在這時候幫我們記憶這些在 Component 內部的資料。
今天的文章參考官方文件的：

• https://zh-hant.react.dev/learn/state-a-components-memory

當一般的變數無法使用

先使用官方文章的範例，當我們想透過 Next 按鈕切換顯示的內容時，會想用一個變數 index 去紀錄，如果我們使用範例的 let index = 0，並且在 handler 裡面寫改變的 side effect index = index +1，想讓每次按按鈕都會增加新的 index 換頁，但是實際按過後會發現畫面沒有變化。這是因為幾個原因：

1. 在每次 render 的時候，內部宣告的變數都會重置
2. 直接改變內部變數不會觸發 render，所以畫面不會因為新資料更新

這時候就要使用 State 來達成上述兩件事，而在 Component 使用 State 的方法就是使用 useState 這個 Hook。Hook 也是 React 獨特的一個東西，在之後的篇章會特別再介紹他。總之要啟用 Component 的 State 我們就要寫成像是：

const [index, setIndex] = useState(0);

這樣我們就會得到一個叫做 index 的 state，而如果要改變他的內容，我們就會需要呼叫 setIndex 這個 function。另外要注意在呼叫 useState 的時候還有傳入一個 0，這個就會是 index 的初始值。

使用 useState

每次 render 的時候，Component 都會從 useState 這邊取得 index 資料，但如果我們使用 setIndex 去給予新的 index 值時，就會觸發再一次 render，並且這次回傳的 index 就會是更新過後的資料，順序會像是：

1. 第一次 render，會從傳入的初始值獲得 index，所以 useState 回傳 [0, setIndex]
2. 當我們使用 setIndex 更新 state，像是 setIndex(index + 1)，而這時候 index 會是 0 所以變成 setIndex(1)，之後 React 就會記得 index 變成 1，並且重新 render。
3. 第二次 render，雖然 React 在讀程式碼時還是 useState(0)，但因為已經記住 index 是 1，所以不會重置而回傳 [1, setIndex]

小結

今天先簡單介紹一下 State 的簡單使用方法，因為我這週末回嘉義有點忙，所以時間有點不夠，明天會繼續介紹這篇文章跟更多的 State 運用。實在不好意思。
今天的文章先到這邊，感謝大家耐心地看完，有任何問題與建議都歡迎告訴我，明天見，晚安。