iT邦幫忙

2021 iThome 鐵人賽

DAY 11
1
Modern Web

React.js 30 天學習全記錄系列 第 11

[ Day 11 ] React 的生命週期 - Mounting

https://ithelp.ithome.com.tw/upload/images/20210925/20134153dsvEaksSTj.png
Class Component 的章節中我們提到過,它有別於 Function Component 的地方就在於 State 和生命週期( Lifecycle )。前面幾篇為大家介紹了 State 和它的使用方法,今天總算就要進入到生命週期的部分啦!


生命週期( Lifecycle )

每個 Component 都有數個 「生命週期方法」( Lifecycle Method ),你可以在同個元件內使用這些不同的方法,以便在開發過程中某些特定的時刻執行某些程式

其實我們可以把 React.js 內的每一個 Component 想像成我們自己一樣,我們會在人生的不同階段執行不一樣的事情或是履行不同的義務,最後經歷生老病死等的過程結束這趟旅程,而 React.js 中的元件也是一樣的。它們在不同的生命週期都有官方提供的不同方法可以做使用,讓我們可以在指定的階段去對該元件做操作(沒錯!那些元件就是操之在我們手中!)。

下面這邊附上官網提供的生命週期圖來幫助大家更加理解這個概念:
https://ithelp.ithome.com.tw/upload/images/20210925/20134153CfPc7K7TDR.png
React.js 元件的生命週期發展是由左至右進行的,透過上面的圖我們可以了解它主要分為了三個生命週期階段

  1. Mounting 掛載(安裝)
  2. Updating 更新
  3. Unmounting 卸載(移除)

另外上圖中除了有生命週期階段的區別之外,下方也有附上不同階段中比較常用到的方法( Methods ),因此後續針對不同階段的篇幅就會以較常使用到的方法來做說明。今天的章節就要來介紹第一個生命週期: Mounting ,那就一起往下看吧!


Mounting 掛載

當一個 Class Component 的實體被建立且加入 DOM 中時。

https://ithelp.ithome.com.tw/upload/images/20210925/20134153CkZUMX8SEJ.png

在這個階段的元件會依照下面的順序來執行對應的方法:

  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

此階段常用的方法為 constructor()render() 以及 componentDidMount() 這三種方法,下面就為大家來詳細介紹:

備註:render() 這個方法也會出現在下一個生命週期階段 Updating 當中,所以會留到下一篇才幫大家介紹喔!

constructor(props)

constructor() 是 JavaScript ES6 的 Class 語法糖,我們曾經在 Day 09 的時候使用過這個方法來初始化綁定我們的 State 值。

另外要特別注意,官網的文件中有提到如果我們並沒有要初始化 State 也沒有需要綁定任何的 Methods 時,那就可以不用使用到這個方法了。

但是如果有需要綁定的話,那就必須在其他宣告之前呼叫 super(props) 這個方法。否則在 constructor() 中使用 this.props 的值就會出現錯誤訊息了。下面就帶大家來看範例:

// 在 constructor() 內呼叫 super(props) 
constructor(props) {
    super(props);
    console.log(this.props)
    this.state = {name: 'Angela'};
}

我們可以在 console 區域得到以下的結果:
https://ithelp.ithome.com.tw/upload/images/20210925/201341539ViWMsMYSf.png

若我們將 constructor() 內的 super(props) 方法移除後則會在瀏覽器看到以下的結果:
https://ithelp.ithome.com.tw/upload/images/20210925/20134153cJ2iNVRfaS.png

componentDidMount()

一個 Component 從 ReactDOM 加入 DOM tree 中之後,便會馬上呼叫的方法。

在這個階段時,原本在 ReactDOM 的元件確實被掛載到了瀏覽器的 DOM tree 當中了,所以這時候我們可以在這個方法內去做 DOM 的操作和綁定。而在官方文件當中也特別推薦這個方法進行實例化網路請求(network request),像是非同步的 API 串接等。

另外,你也可以將需要監聽的事件( Event Listener )寫在這個方法內,因為這個階段的 DOM 已經順利掛載完成。不過要特別注意,如果有綁定監聽事件的話要記得在第三個生命週期: Unmounting 中的 componentWillUnmount() 方法中來解除該監聽事件,否則當重新渲染畫面時又會再次監聽事件了。


對於生命週期的第一階段 Mounting 就介紹到這,其實這個階段中還有一個方法 static getDerivedStateFromProps() 沒有介紹到,如果大家有興趣的話這邊附上官網的傳送門

render() 這個方法,我們將於明天的章節: Updating 生命週期中一併介紹喔!
那今天先到這邊告一個段落了,歡迎大家多多指教!
我們下篇見ʘ‿ʘ


上一篇
[ Day 10 ] setState() 的用法
下一篇
[ Day 12 ] React 的生命週期 - Updating
系列文
React.js 30 天學習全記錄30

尚未有邦友留言

立即登入留言