前言

本篇主要會說明，在 Hooks 讓 Function Component 具備 State 後，該如何使用及設置。

前置準備

1. 文中的專案會以 Day05 的專案架構繼續講解，如果未跟到進度，可以從 GitHub 上 Clone 下來。
2. 一顆擁有學習熱忱的心。

使用方法

useState

首先打開 src/index.jsx 中，裡面有先前設置的一個 Main Component：

這個 Main 目前是沒有 State 的 Component ，也就是上一篇提到的 Stateless Component。

接著要從 react 套件中，把 useState 給 import 進檔案中：

import React, { useState } from 'react';

useState 在使用時會回傳一個陣列，陣列中的第一個值就是 State 的初始內容，第二個值是一個方法，能夠以它直接更新對應 State。

以下是幾個簡單的使用範例：

// 會回傳一個陣列， count 為 0 ， setCount 用來設置 count
const [count, setCount] = useState(0);

// 更新 count 至 1
setCount(1)

// name 的初始值為 '神 Q 超人' ， 用 setName 可以設置 name
const [name, setName] = useState('神 Q 超人');

// 更新 name 至 '小馬彬'
setName('小馬彬');

了解基本的使用方式後，下方逐步將 Main 變成一個簡單的計數器，就像上一篇的範例。

Step1 加入 useState

Step2 把 h1 的內容從 'Hi JSX！' 變成 Count

Step3 新增 button，點擊後用 setCount 讓 count+1

完成後便可使用指令 npm run start 執行專案，就能看到剛剛製作的畫面：

點擊按鈕會觸發 State 改變，畫面 Render 新 State 的結果：

與 Class 不同的部分除了 Component 更簡潔外，要注意取用 State 時不需以 this，更新時也不必用物件作更新：this.setState({ count: this.state.count + 1 ,})，因為每個 State 都由不同的 useState 建立，所以只需要呼叫各自的更新方法就好。

本文的原始碼內容會放置於 GitHub 上，歡迎各位參考使用。

結尾

本文提到的 useState 只是 Hooks 的一小部分而已，就像是當初我們翻著獵人，然後聽見小傑他爸說：「其實我們的世界還有外面，嵌合蟻只是外面世界的小部分。」，而嵌合蟻就像 useState，除了它以外，Hooks 也有很多有趣的功能，之後會再一一向大家介紹！

如果文章中有任何問題，或是不理解的地方，都可以留言告訴我！謝謝大家！