React 從版本 16.8 推出 Hook，在 16.8 以前都是使用 Class component ，今天我們會提一下為什麼會從 Class component 轉變到 Hook

在這之前，我們先提一下 Hook 是什麼？

React Hooks 是一組內建的函式，
不需要將 component 轉換為 Class，就可以在 Function component 內使用 狀態等功能。

Hook 有什麼

基本 Hooks

• useState: 辨識變數的狀態變化
• useEffect: 控制 function component 的生命週期
• useContext: 讓參數可以直接傳遞到其他元件，不需要用 props 一層一層的傳

進階 Hooks

• useReducer: 適用於複雜的狀態管理，基本的通常是用 useEffect
• useMemo: 避免重複計算，把結果存在快取中，有用到時再拿出來
• useCallback: 類似 useMemo，不過是記住 function
• useRef: 對網頁中的某個元素作標記，以便之後選取
• useLayoutEffect: 類似 useEffect，不過比 useEffect 更能達到即時更新
• useImperativeHandle: 父層去決定子層要 expose 什麼屬性

狀態管理：

• Class component 是使用 this.state 和 this.setState() 來設定
• Hooks 的話是使用 useState 跟 useReducer 來設定

而 this 其實有蠻多坑的，如果不知道原理，每次在抓的時候就有可能抓到錯誤的目標

在 Hooks 中，並沒有 this 這個概念，所以就不需要擔心會踩到坑

生命週期：

• Class component 使用了 componentDidMount、 componentDidUpdate、componentWillUnmount
• Hooks 是使用 useEffect 來處理生命週期

Class component 光是在處理生命週期就需要三個方法來處理，
使用上不便利以外，
也會讓程式碼相對冗長。

Hooks 的推出讓我們在開發增加了便利性，除了輕量以外，也讓程式碼相對簡潔
Class component 雖然在處理生命週期及狀態管理時相對麻煩，不過如果理解概念就能彈性調整