這次要筆記的是：
React Hooks
在這之前，先來了解什麼是 React Hooks？
React 的組件有分兩種，一種是「類式組件」、另一種是「函式組件」，我在初學 React 時，是從類式組件開始，在 React 還沒有引進 Hooks 的以前版本時，函數式組件因為本身沒有 this，所以很多事無法做，像是組件的核心功能「Props ( 屬性 )、State ( 狀態 )、Ref ( 參考 )」中，就有兩個無法實現 ( State 和 Ref，它們需要 this )，所以那時的函式組件用處不大
Props ( 屬性 ) 可以參考 這篇
但是 … 但是 …
在 React 16.8 版本引進 Hooks 後，函式組件整個強大起來，從那時開始函式組件不只可以使用 State 和 Ref，並且在管理組件的狀態和生命週期上，都比類式組件好用簡單多了，所以現在已經很少人在用類式組件了
類式組件的生命週期真的是很多又混亂，還有新／舊生命週期之分，然後每個生命週期名稱還又臭又長，當初學時真的是頭腦昏脹，學完後發現現在幾乎用不到….呵，但不好用的東西被淘汰掉也是好事啦
以上就是 React Hooks 的原由，接下來才是要開始重點整理以下三種 Hooks
useState、useEffect、useRef
至於這麽多的 hooks，為什麼只挑這三種呢？因為我目前練習只有先用到這三種ＸＤ
快速尋找
1. useState
說明：
useState 用來新增並管理函式組件內的 state，透過 useState 所提供的「更新函式 ( 即 setState ) 」來更新 state，而當 state 更新後，React 就會重新渲染組件，以確保畫面上顯示的是最新的狀態
補充：一旦組件內的 state 更新，React 就會重新渲染該組件。如果傳給底下的子組件的 props 有改變的話，子組件也會重新渲染
寫法：
// 新增狀態
const [state, setState] = useState(initialState);
// 更新狀態
setState(newState);範例：計算總和
count 的初始值為 0，按下按鈕後，總和會 +2
2. useEffect
說明：
useEffect 用來監控某個狀態，一旦該狀態更新，會在組件渲染完成後，執行指定的函式內容
→ 第一個參數：放要執行的函式，資料型別為「函式」
如果函式內有寫「消息訂閱 / 發布、計時器…等功能」，最好再寫個
return把它們清除掉，以避免因為狀態更新而導致無窮迴圈
→ 第二個參數：放要控管的狀態，資料型別為「陣列」，有以下三種寫法：
- []：空陣列，
useEffect函式只會在組件「首次」掛載時執行一次 - [監控的狀態]：當指定的狀態更新時，
useEffect函式會被執行 - (無)：不寫，任何狀態更新時，
useEffect函式會被執行
寫法：
useEffect(() => {
// 執行內容
return () => {
// 清理邏輯（可選）
};
}, [監控的狀態]);範例：計時器
每隔一秒，總和就會+1
3. useRef
說明：
useRef 用來抓取組件中的 DOM 元素節點，然後可對該節點去取 value 值、做 focus 聚焦、做 reset 清空值…等。還有另一個用途是儲存可變的資料，並且在更新時不會讓組件重新渲染
寫法：
const refContainer = useRef(initialValue);範例：取出 DOM 元素節點的值
按下按鈕後，跳出視窗，顯示在輸入框所輸入的內容
範例：儲存可變的資料而不觸發組件重新渲染
每次按下按鈕後，會透過 times 來紀錄次數，並且不會因為 times 更新而重新渲染組件
