React介紹2
此篇文章參考 SuoChan 阿關技術筆記 & Learn React #8: The React Lifecycle of a Functional Component(By Anthony Sistilli)
簡易比較function component & class component
Function Component
在src資料夾中，新增Welcome.js檔案，自定義一個function為Welcome
加入元件時，記得import引用。畫面會出現新增的元件。
在撰寫元件時Component 的第一個字母一定要大寫，並且該 Component 的名稱也必須和該函式 Function 同名。
class Component
在src資料夾中，新增Bye.js檔案，自定義一個class為Bye
加入元件時，記得引用import。畫面會出現新增的元件。
在 React Hooks 之前
在 React Hooks 尚未出現的時候，開發者只能使用 Class Component 來撰寫 State 以及綁定使用 React 的生命週期（ Life Cycle ）。所以在當時，如果需要綁定生命週期做特定的更新和掛載時就一定得使用 Class Component 才可以達到目的。而 Function Component 所應用的場景就會是在處理比較單純的 UI （沒有 State 的狀態），加上 Function Component 在撰寫時因為較為接近原生的寫法，並不需要額外寫 extends 來繼承 React Component 和 render() 函式，所以在編譯的效能上會比 Class Component 還要來得更好。
在 React Hooks 之後
在 React Hooks 出現之後，原本只是作為單純處理 UI 畫面的 Function Component 現在能夠使用 React Hook 的 useState 來操作 State ； 使用 React Hook 的 useEffect 來達到類似操作生命週期的功能。搭配上述提及的 Function Component 在撰寫上的便利性，讓 Function Component 成為了近代 React.js 開發元件時的熱門選項。
組件的生命週期
每個組件有自己的生命週期，而生命週期可分為三個狀態：
- Mounting(掛載)：已插入真實DOM
- Updating(更新)：正在被重新渲染
- Unmounting(卸載)：已移出真實DOM
React Lifecycle (class-based)
React Hooks Lifecycle
針對最常用的 useEffect hook 做探討
useEffect第一個參數是一個function，第二參數是Array。
useEffect hook 對應 componentDidMount, componentDidUpdate, componentWillUnmount：
useEffect結合update, clean up
To be continued…
