iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
Modern Web

I Want To Know React系列 第 11

I Want To Know React - 初探 Lifecycle

初探 StateClass Component State 語法State 內部運作原理 這三個篇章中介紹了 state 的概念、用法與運作原理。

如果讀者還記得前幾篇提到的小時鐘範例,範例中,Clock Component 在 componentDidMount 函式中設定 timer,每秒去更改 component 的 state,並在 componentWillUnmount 函式中把 timer 清除。

componentDidMountcomponentWillUnmount 這兩個函式都是 React 提供的 class component 生命週期函式(Lifecycle methods),可用來供開發者在 component 的各個生命週期(Lifecycle)中自定義要執行的動作。

這個篇章將介紹何謂 React component 的生命週期(Lifecycle),而 Component 生命週期函式(Lifecycle methods) 又是什麼,期待讓讀者能更進一步掌握 component 的運作方式。

就讓我們直接進入主題:React component 生命週期(Lifecycle) 吧!

React component 生命週期(Lifecycle)

何謂 React component lifecycle

Lifecycle 代表著 React component 建立出來的 instance 的各個生命階段。

就像是人會生、老、病、死一樣,對 React component 的 instance 來說,它們會有創建(Mounting)更新(Updating)刪除(Unmounting) 這三個生命週期。

也如同每個人都是各自的個體,擁有自己的生老病死時間一樣,每個 component 的 instance 也有自己獨立的生命週期。

何謂 React component lifecycle methods

React 在 class component 中有提供幾個內建函式,分別會在不同的 lifecycle 時期執行。這些函式即為生命週期函式(Lifecycle methods)。

只要開發者實作/覆寫 lifecycle methods,React 就會在 component instance 對應的時期執行 lifecycle methods 的函式內容。

React component 生命週期概覽

接著讓我們來概覽 React component instance 的生命週期。

何謂 React component lifecycle 段落所述, React component 創建出來的 instance 會經過三個生命週期:

  • Mounting (創建) 時期
  • Updating (更新) 時期
  • Unmounting (刪除) 時期

每個時期中又可分為三個子階段:

  • Render 階段
  • Pre-commit 階段
  • Commit 階段

以下這張圖即可以很清楚的表達 React component instance 的生命週期:

https://ithelp.ithome.com.tw/upload/images/20200926/2010779073193c3cJ9.png

  • ?小提醒:此 component instance 生命週期圖的 React 版本為 ^16.4。讀者們也可以到生命週期網頁版查看上面的 lifecycle methods。

到這邊為止已經了解了何謂 lifecycle 以及知道一個 React component 的 instance 會有哪些生命週期。

接下來的幾個段落會分別介紹 Lifecycle 的各個時期:創建(Mounting)更新(Updating)與 刪除(Unmounting)

另外,Lifecycle 的每個時期可以對應到概覽圖中的一直排(Column)。讀者閱讀時也可以同時參考概覽圖。

Mounting (創建) 時期

觸發時機

Mounting (創建) 時期是發生在 component 的 instance 剛建立出來,並被加入 DOM 中的時候。如下圖紅色直排所示:

https://ithelp.ithome.com.tw/upload/images/20200926/20107790nGAUiiTywv.png

就像一般物件導向語言中每個 instance 只會被初始化一次一樣,一個 React class component 的 instance 只會經歷一次 Mounting 時期。

內部運作步驟

具體一點來說,React 在 Mounting 時期大致上會做以下幾個步驟:

  1. 初始化 component instance

    首先,就像一般語言的 class instance 一樣,React 也會先執行 component class 的 constructor 來初始化並將 component instance 創建出來。

  2. 產出 Component 自定義的 React element

    接著,React 會執行 render 以產出 Component 自定義的 React element 內容。

    請注意,React element 只是模擬 DOM element 的 JavaScript object 而已。到目前為止,內容都還未被實際更新到 DOM 上。

  3. 把 Virtual DOM snapshot 產出來,並跟之前的 Virtual DOM snapshot 比較

    React 會在把 Virtual DOM snapshot 產出來,並與上一個產出的 Virtual DOM snapshot 做比較(Diff),決定哪些內容是要實際被更新到 DOM 上的。

  4. 把差異的的部分實際更新到 DOM 上

    最後,React 會把 Virtual DOM Diff 完不同的內容實際更新到 DOM 上。剛創建出來的 element 就這樣顯示到畫面上了。

除此之外,React 也會觸發一些 lifecycle methods,這些函式將在之後介紹。

Updating (更新) 時期

觸發時機

Updating (更新) 時期會在 component instance 的 props 或 state 被更新(setState),亦或者被強制更新(forceUpdate)時觸發。如下圖紅色直排所示:

https://ithelp.ithome.com.tw/upload/images/20200926/20107790AGTAhReLs7.png

由於一個 component instance 的 props 與 state 可以被多次更改,因此一個 component instance 可能經歷多次的 Updating 時期。

內部運作步驟

具體一點來說,React 在 Updating 時期大致上會做以下幾個步驟:

  1. 決定 Component 是否更新

    首先,React 會通過 shouldComponentUpdate 回傳的值決定這個 lifecycle method 決定 component instance 到底要不要更新。

  2. 重新產出 Component 自定義的 React element

    接著,React 會再次執行 render 以產出 Component 自定義的 React element 內容。此內容通樣尚未實際放到 DOM 上。

  3. 把 Virtual DOM snapshot 產出來,並跟之前的 Virtual DOM snapshot 比較

    React 會在把 Virtual DOM snapshot 產出來,並與上一個產出的 Virtual DOM snapshot 做比較(Diff),決定哪些內容是要實際被更新到 DOM 上的。

  4. 把差異的的部分實際更新到 DOM 上

    最後,React 會把 Virtual DOM Diff 完不同的內容實際更新到 DOM 上。剛創建出來的 element 就這樣顯示到畫面上了。

除此之外,React 也會觸發一些 lifecycle methods,這些函式將在之後介紹。

從這些步驟中可以發現,React 在 Updating 時期執行的 2 3 4 步驟其實與 Mounting 階段幾乎相同,只差在 React 呼叫的 lifecycle methods 不同而已。這是因為 Mounting 與 Updating 兩個週期都有同樣的 Render 階段Commit 階段

Unmounting (刪除) 時期

觸發時機

Unmounting (刪除) 時期會在 component 的 instance 要被刪除,並從 DOM 裡移除時觸發。如下圖紅色直排所示:

https://ithelp.ithome.com.tw/upload/images/20200926/20107790n1r1aP2oTE.png

由於一個 component instance 刪除之後就不會存在了,因此一個 React class component 的 instance 只會經歷一次 Unmounting 時期。

內部運作步驟

具體一點來說,React 在 Unmounting 時期大致上只會做兩個步驟:

  1. 把 component instance 釋放掉

    執行 lifecycle method:componentWillUnmount,其中開發者可以把一些註冊的內容給釋放掉(例如:把 setInterval 可用 clearInterval 清除掉)。

  2. 把 component instance 從 DOM 上移除

    最後,React 會實際把 component 從 DOM 上移除。Component instance 的一生就此結束。

Error Handling (錯誤處理) 時期

需要一提的事,component lifecycle 其實還有一個隱藏的週期:Error Handling (刪除) 時期

Error Handling 時期只會在 contructorrender 或其他 lifecycle methods 出錯時被觸發。

相關內容將在之後的章節中介紹。

小結

在這個章節,我們了解了 React component instance 的生命週期(Lifecycle)代表一個 component instance 各個生命階段。

而每個生命週期都有提供對應的生命週期函式(Lifecycle methods),讓開發者在 component instance 對應的時期執行函式內容。

Component instance 生命週期有三個:

  • Mounting (創建) 時期
  • Updating (更新) 時期
  • Unmounting (刪除) 時期

每個週期又分為三個階段:

  • Render 階段
  • Pre-commit 階段
  • Commit 階段

目前已經介紹完各時期的內部運作步驟了,下個章節將換個方式,從生命週期階段(Lifecycle phases)的角度下去了解整個 Lifecycle。

參考資料


上一篇
I Want To Know React - State 內部運作原理
下一篇
I Want To Know React - Lifecycle 階段
系列文
I Want To Know React30

尚未有邦友留言

立即登入留言