iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
0

今天與明天會來短暫介紹一下 class-based 的 component,今天將講解 class component 的基礎,也比較一下與 functional 的差別,明天將介紹 class-based component 的 lifecycle,讓我們為下一個 hook-useEffect 打下基礎知識。

什麼是 class-based component?

在 react-hooks 出現以前,react 專案基本上會看到兩種型態的 component ,一種是我們前幾天寫的 functional 函式型寫法,另一種則是今天要介紹的 class 寫法。原因在於在過去只有 class-based component 可以使用 state 與明天要介紹的 lifecycle ,而 functional component 基本上只負責單純呈現資料,有可能是寫死的資料,或是透過 props 傳來的資訊。

但是,hooks 的出現改變了一切。

像我們前幾天學過的,functional component 現今也能夠使用 state 了。現在我們來看看兩者的差別,大家看完後應該會更了解 state 的強大。

一樣透過前幾天的 counter 範例來示範,看看原本處理 state 的 App.js 用兩者寫法的差別。

hooks way:
https://ithelp.ithome.com.tw/upload/images/20190912/20113277wTh4um4ZEh.png

class-based
https://ithelp.ithome.com.tw/upload/images/20190912/201132778SQ5WLt9yX.png

實作一樣的功能,從程式碼就能發現 functional 的簡潔多了。
class-based component 要使用 state 必須定義一個 state 物件,而要修改 state 必須透過 setState 這個內建函式,相比 hooks 是一個 state 定義一個變數與一個涵式,hooks 的方式方便管理許多。
可以注意到在 class 的 component 中要把修改 state 的函式當作 props 傳下去,必須要另外定義一個函式把 setState 包在裡面再傳給子元件,而 hooks 則是可以直接傳,當專案結構變複雜後實在方便太多了。

class-based component 與 functional component 的渲染機制

  • class: 即使狀態沒變化,只要調用了 setstate function 就會觸發 component 的重新渲染。
    也就是說

https://ithelp.ithome.com.tw/upload/images/20190912/20113277nxSRdCU7O8.png
倘若剛剛的範例改成這樣,原本的count state 的值就是 0,通過 setState function 後還是把他設為 0,即使值沒有改變,但調用了 setState 就會迫使元件重新渲染。

  • functional: 對函式組件來說,只有狀態值真正改變時,才會觸發 render 函式的調用。
    因此某些狀況下 functional component 自動幫你擋掉了一些不必要的重新渲染,提升整體效能。

  • parent && child component: 無論是 class-based 還是 functional 的component,一但父元件重新渲染,子元件的render都會被觸發

今天稍微簡介了 class-based component 的概念,其實很多公司的專案依然包含過去使用 class-baesd 建構的元件,因此還是有必要了解的(雖然現在新寫的都直接用 functional 了),明天將介紹 class-based 的重要概念 - lifecycle,為我們學習第二個 hook 建立基礎,大家明天見!


上一篇
【Day 7】型別檢查 && PropTypes
下一篇
【Day 9】Component Lifecycle
系列文
React.js 從 【0】 到【1】推坑計畫 30

尚未有邦友留言

立即登入留言