文科少女學程式

今天來看看Functional Component和 Class Component！
其實在Vue裡面也有分這兩種Component，在Vue2主要是Class Component，到了Vue3才變成Functional Component，React也一樣到了Hooks出現後Fuctional Component就變成大家主要在使用的Component。不過老實說，在使用Vue的時候，我並沒有認真去研究這兩種Compnent的差異，甚至也沒不知道原來有這樣的差異，直到這次接觸了React後，才好好地看這個部分，就知道我有多廢了ㅠㅠ。好啦！廢話不多，進入正題吧！

什麼是Component？
在一個頁面裡面，會由好幾個部分組成，像是Menu、Sidebar、Card等等，這些被拆成一小部分，甚至是可以在不同頁面重複被使用的部分就可以被稱作為Component。中文的話，通常會稱呼為元件。在React中，主要又分為兩種Component，也就是開頭所提到的Class Component和Functional Component。
 

Functional Component
Functional Component是function形式的Component，這個類型的Component沒有自己的state，所以是一個Stateless(無狀態)的元件。
通常Functional Component會寫成以下這個樣子，真的就是一個function的樣子吧！

另外，也可以寫成arrow function(箭頭函式)，像是以下這個樣子。


接下來看看Functional Component的特點有哪些？
1. 可以使用Hooks。
2. 沒有this，無法使用this.state，但可以透過useState這個Hook來使用state。
2. props傳遞方式是透過function參數傳入。
4. 沒有生命週期。

Class Component
有接觸Vue的人，應該對Class Component不陌生。 沒錯！開頭通常都會有class XXX extend XXX，也就是會長得下以下這個樣子。

再來看看Class Component的特點有哪些？
1. 無法使用Hooks。
2. 有this，可以使用this.state，能擁有自己的private data。
3. props傳遞方式是透過this.porps。
4. 有生命週期，可以依照component的生命週期去執行一些動作。

哪一種Component比較多人使用？
雖然我只是一個React菜鳥，不過其實在看學習資料時，以及從身邊有在用React那裡打聽到的狀況有發現比較新的專案大多都是使用Functional Component。如果有一些一開始是以Class Component寫的專案，也有後期又被加入了一些Functional Component的情況。
至於我個人使用上的感覺是我覺得Functional Component的使用、熟悉和理解都更容易一些，所以使用Hooks其實對新手的門檻比較低，不過我自己還是傾向於兩種都去碰、去學，才能更理解React。

好啦！今天不專業學習筆記就到這裡啦，大家掰餔！