使用 useState 來管理狀態

前面提到當變數更新時，React 還不知道資料有更新。所以 React 提供了一個方法來監控而且管理資料，而這就是 React 的 Hooks 之一 - useState。

image-20201026231623174

什麼是 State

首先要先來了解 State 是什麼，才能 use 它。根據 React 官網說到，State 類似 props，不過差別在於 State 是由 Component 私有控制的。可以把它當成是資料，假設一個資料有兩種狀態，true 或 false，預設狀態是 false，當你使用它時，就會變成 true，這種狀態就是 state。

來試著使用 State Hook 吧

先來簡單瞭解一下什麼是 Hook：

Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。 (來自 React 官網的解釋)

簡單來說 Hook 就是 React 中各項特殊 function，而本篇則是會介紹 useState 的用法。

開始使用 useState

下方有一個 Component，來試著使用 useState 改動畫面。

See the Pen React Component by Bucky Chu (@bucky0112) on CodePen.

從 React 中引入 useState。

const { useState } = React;

呼叫 useState，宣告一個 state，並回傳了 2 個值。第一個是變數，並帶入參數給 useState；第二個是更新變數的函式。

// [變數, 更新變數的函式] = useState(變數預設值)
const [count, setCount] = useState(0);

讀取 State。

{count}

透過點擊，就會呼叫 setCount 並傳入新的值，React 會重新 render component，顯示新的 State 值。

setCount(count + 1)} >+

完整的點擊器範例就完成了

See the Pen React useState by Bucky Chu (@bucky0112) on CodePen.

useState 做了什麼？

我們透過 useState 建立一個需要被即時監控的資料變數，在這個範例中也就是 count，並呼叫了它提供的更新變數的函式來改變數值。如果變數的值有變化，也確實有呼叫 setCount 的話，那麼 React 就會以資料驅動畫面更新，這就是 useState 幫我們做的事情。