大家好，今天的篇章要介紹的是 useState、useEffect

會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day4-react-eslint

Hooks 帶來完全有別於以往的 component 撰寫方式，也就是 Functional Component，就直接新增一個 .tsx 來實作看看吧！

先修改 index.tsx 的程式碼，引入 Root.tsx

新增一隻檔案 Root.tsx，這邊把這隻檔案當成一個 page，然後建立不同的 component 上去，來展示 Hooks 的功能

+ src/Root.tsx

程式碼為

這樣就是一個 functional component 了，在還沒有使用 Hooks 之前，它就是單純 render JSX，或是可以接 props 屬性來改變 render，撰寫過程中因為有裝了 @typescript-eslint/eslint-plugin，所以要對 function 指定回傳型別，可以看到它就是一個 JSX.Element

useState

接下來請出萬用的 Counter 來搭配 useState 來改寫 Root.tsx

ESLint 弄出來的紅色底線黃色底線也修正一下

修正的地方有兩點，button 要指定 type="button"，function 一定要有回傳型別，接下來就運行 webpack-dev-server 後來看看。

npm run dev

這樣萬用的 Counter 搭配 useState 來作用就完成了，useState 是一個在 functional component 中「保留」變數的函式，count 已經被函式保留了起來，如果使用 setCount(新的值)這個函式，除了會設定新的值到 count 裡，還會讓整個 functional component 執行 rerender，所以每當按下按鈕觸發執行 setCount(新的值)，functional component 執行 rerender，然後看到的 count 都會是最新的值。

為了方便接下來要創建新的 component，所以在這邊要將 Root.tsx 的程式碼給移至 src/components/Counter/Counter.tsx

+ src/components/Counter/Counter.tsx

Root.tsx 的程式碼內容改為

useEffect

useEffect((): void => {
  // do something
}, []);

接下來要介紹的 useEffect，筆者私心認為最常用的情形就兩種，所以也只會介紹兩種

1. functional component 利用第二個參數的陣列為空，在執行第一次時去取得非同步的資料來存進 state
2. 利用第二個參數的陣列，填進變數，監聽該變數是否改變，如果是，才會執行 useEffect 內的程式碼，達到優化的效果

首先示範第一種取得非同步的資料，先下載 axios

npm i axios

然後新增一個 .tsx

+ src/components/GetUUID/GetUUID.tsx

因為第二個陣列為空，要監聽的變數就永遠不會有改變的情形發生，所以 useEffect 只會執行一次，執行 ajax 等到回傳值後 setUuidString，將 uuidString 更新並 rerender，這是筆者認為第一種常用的方式。

axios 呼叫的 url 來源為此 http://httpbin.org/#/Dynamic_data/get_uuid

將此 component 引入 Root.tsx

畫面上呈現為

每次重整頁面都僅僅只會執行一次 ajax 請求，來改變 uuid 的值

接下來示範第二種，useEffect 的第二個陣列設置變數，監聽該變數是否改變

新增一個 .tsx

+ src/components/GetUUIDByMultipleOfFive/GetUUIDByMultipleOfFive.tsx

這個寫的可能稍嫌複雜，button 按下後會去增加 countRef.current（useRef 後續會有專門篇章講解，這邊可以先當成他是一個有保留值的功能，但改變值不會觸發 rerender 的函式），如果 countRef.current 是 5 的倍數，則會去 setCount，這時 useEffect 監聽的 count 發現它改變了，就會執行 useEffect 內部的函式。

將此 component 引入 Root.tsx

執行結果

點了按鈕五下就會再發送一次 ajax 去要資料，這是筆者認為第二種常用的方式。

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day5-usestate-useeffect

明天會再介紹其它的 Hooks 們的使用