一、前言

昨日誠摯的建議（洗腦）各位學習 React 的 Class 寫法之前，可以先學習強大的 Hook，或許是一種不錯的入門方式。今天要持續的來探討 Hook 上有哪些功能，今天重點會放在useState和useEffect上。那麼，我們開始吧！

二、什麼是 useState？

今天查了一堆資料，大多是與 Hook 的用法，或是 Hook 語法的寫法，雖然網路上資料蠻多都在介紹 useState和 useEffect的用法，如果只看一篇文章，有可能還是不太明白它們的在做什麼的，建議可以多看幾篇相關文章會比較清楚。

所以，useState到底是什麼呢？

簡單說，useState 是 Hook 的 component function（可以想是 JavaScript 的 Function，而我們使用 Hook 的 component function 就如同 Function 的加強版寫法）。好的現在知道useState是什麼後，那麼到底它的用途是什麼呢？其實，它的用途是紀錄變數的初始狀態與更新後的狀態，可以參考下面語法。

JavaScript：

const [state, setState] = useState(initialstate)

變數 state 和 setState 分別代表初始狀態以及更新後的狀態，useState 裡面的initialstate可以放一個數值代表初始值，或者是直接加入一個 Function，例如下面的語法。

JavaScript：

const [sum, setsum] = useState(function generateRandomInteger(){5+7);})

舉個例子，這裡先引用這篇【1】的程式碼來做說明。

JavaScript：

import React, { useState } from "react";
 
function App(props) {
  const [count, setRandomCount] =
    useState(function generateRandomInteger() {
    return Math.floor(Math.random() * 100);
  });
  function clickHandler(e) {
    setRandomCount(Math.floor(Math.random() * 100));
  }
  return (
    <div style={{margin: 'auto', width: 100, display: 'block'}}>
      <h1> {count} </h1>    
       
			<p>
        <button onClick={clickHandler}> Click </button>
      </p>
 
    </div>
  );
}
 
export default App

為了要把useState加入到 React 中，所以需要加入import React, { useState } from "react";這一行。generateRandomInteger裡面的初始值會是一個 0 ~100 的亂數，然後底下有加入一個 Button，這個 Button 會有一個名稱為clickHandler的 Function，這個 Function 也會產生一個 0 ~100 的亂數，可以特別注意的是setRandomCount，它就是之前說過的setState（更新後的狀態），然後可以透過 count來更新資料，至於setRandomCount之間count怎麼傳送的，我要再研究研究 ．．．

這個範例其實就是在做：「有一個初始值會是範圍 0 ~100 的亂數，當按下 Button 時，會更新亂數的值，並且顯示在 h1 元素上（更新 h1）」。

上面的範例寫的很棒，至少我是從不懂 useState 到知道它的基本用法。建議可以多看個幾遍。

三、什麼是 useState？

useState 部分還在研究，待更新！

四、推薦資源

1. 從零開始學 ReactJS（ReactJS 101）
2. Hooks FAQ
3. React Hooks 總整理筆記
4. [React Hook 筆記] 從最基本的useState, useEffect 開始

五、結論

Hook 的入門實屬不易，有可能是我還少了某些預備知識需要補足，也有可能是還沒有找到一個「好理解」的、適合自己的資料，參考的文章技術程度太高（大神太強了，新手看不太懂．．．），這讓我自學 React 遇到一點阻礙，看了好幾篇才稍微知道用途。儘管學習比較難入門，不過沒有關係，只要一直摸索，相信總是會有學會的一天。那麼，今天的內容就到這邊結束囉，謝謝收看！

六、參考資料

1. What is useState() in React ?
2. React useState Hook