又是前言

某次面試被問到 useState 的 object 與 function 的概念，阿我這個只接觸過 react 16.8 之後的半路出家工程師又是一問三不知了。useState 不就是設定一個值以及能修改這個值的 function 而已嗎，什麼 object? 所以今天就來深入了解一下 useState 吧。

正文在這

大家都知道 useState 長相如下吧：

const [state, setState] = useState(initialState);

useState宣告我們整個 component 裡可引用的 state 變數，再設定可改變 state 的 function setState ，以及其初始值 initialState。

大家有發現嗎

宣告 state 變數時使用了方括號：
等號左邊我們命名的 state 變數
這個 JavaScript 語法叫做陣列解構賦值。這代表我們宣告了兩個新的變數 state 和 setState，state, setState被設為 useState 回傳的第一跟第二個值。與下方程式碼相同：

  var stateVariable = useState(initialState); // 回傳一對值
  var state = stateVariable[0]; // 第一個值
  var setState = stateVariable[1]; // 第二個值

當我們使用 useState 宣告 state 變數，他會回傳一對在 array 裡的值。
第一個值是目前 state 的值，第二個是一個可以更新 state 的 function。因為它們有特殊的意義，用 [0] 和 [1] 來存取它們的話會令人困惑。所以我們使用陣列解構賦值來命名它們。

---

引用自官網

而當 state 改變時我們的 component 就會重新渲染，不過並不是每次改變就會渲染喔，而是要利用我們宣告的 setState 去做 state 的更動才行。

而上方提到的 useState object 部分其實是比照 class component 才會有的問題，因為在 class component 時的 state 他是以 object 的方式呈現，如下方範例：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

（object 部分是我個人解讀，歡迎任何當過面試官的人來糾正我，拜託～）

關於更多 class component 大家可看我這 codepen 範例 ，很眼熟是吧，我懶得寫新的都用之前文章用過的範例ㄏㄏ。

不過在 useState 時其實並不受此限制，想使用任何型態的 state 都可以。不像 class 的 this.setState會合併原本的 state，這裡更新 state 變數會直接取代舊變數。