Class Component vs. Function Component

React Hooks 完全改變 React 原本風格，本文簡單總結 Class Component 與 Function Component 的差異。

Version

macOS Mojave 10.14.6
WebStorm 2019.2.3
Node 12.11.0
Yarn 1.19.0
create-react-app 3.1.2
React 16.10.1

Class component：
- 使用 lifecycle method 處理 side effect，導致同一類型的 side effect 分散在不同 lifecycle method
- componentDidMount() 與 componentDidUpdate() 會出現重複 code
- 在 lifecycle method 必須使用 this 存取 state 與其他 method，須考慮 this binding 問題
Function component：
- 使用 useEffect() 處理 side effect，一個 useEffect() 一個 side effect，不會分散在不同 lifecycle method
- 相當於在 componentDidMount()、componentDidUpdate() 與 componentWillUnmount() 執行 effect function，觀念上可簡化成每次 DOM render 執行 effect hook，不會出現 componentDidMount() 與 componentDidUpdate() 有重複 code
- Effect function 使用 closure 存取 state 與其他 function，不需使用 this，不會有 this binding 問題

Class Component：
- 使用 this 存取 state 與其他 method，須考慮 this binding 問題
- 使用 this.setState() 改變 state，須考慮 this binding 問題
Function Component：
- 直接存取 state 與其他 function，不會有 this binding 問題
- 使用 useState() 提供的 setter function 改變 state，不會有 this binding 問題

Class Component：
- 使用 render() method 回傳 JSX
- 使用 this 存取 state 與其他 method，須考慮 this binding 問題
Function Component：
- 回傳就是 JSX
- 直接存取 state 與其他 function，不會有 this binding 問題

Function component 由於都在同一個 function 內，可發揮 closure 特性，不再如 class component 須考慮 this binding 問題，不利於日後重構
Function component 平均程式碼行數只有 class component 的 2/3，更為精簡