iT邦幫忙

2021 iThome 鐵人賽

DAY 12
1
Modern Web

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

[ Day 12 ] React 的生命週期 - Updating

https://ithelp.ithome.com.tw/upload/images/20210925/20134153q9g6Thk46v.png
今天要來進入到生命週期的第二個環節: Updating 更新,繼上篇的 Mounting 元件掛載階段中提到過有一個方法是在 Updating 階段也會出現的,那我們就接著繼續看下去吧!


Updating 更新

當一個 Component 內的 propsstate 的值有變化時,就會產生更新( Update )並重新渲染畫面。

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

按照官網文件的說明,這個階段的元件會依照下面的順序來執行對應的方法:

  1. static getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. componentDidUpdate()

這邊我們一樣針對較常用的 render()componentDidUpdate() 這兩個方法來為大家介紹:

render()

為 Class Component 中唯一必要的方法。

在上一篇 Day 11 中我們有提到過 render() 方法是同時出現在 Mounting 和 Updating 兩個生命週期中的。

這個方法最主要的工作就是要去檢視 this.propsthis.state 中的變化,並在發現變化後將 return() 陳述式當中所撰寫的 JSX 渲染到畫面上。所以我們在過去的篇幅中一再強調,當 propsstate 的值產生變化時會重新渲染畫面( Re-render )的原因,其實就是因為它再次執行了 render() 這個方法。

// return() 陳述式範例
return (
  <div>
    <h1>Hello, world!</h1>
  </div>
);

另外這裡要注意一個小細節, render() 是在畫面確實掛載和渲染之前的最後一個生命週期方法,所以在這個階段請不要去操作任何在 return() 陳述式中的 DOM ,因為這時候這些 ReactDOM 並還沒有真的被掛載到 DOM tree 上面。

componentDidUpdate(prevProps, prevState, snapshot)

這個方法會於元件再次的更新後才會馬上被呼叫。

所以 componentDidUpdate() 在元件的第一次渲染( render )時並不會被呼叫,只有當它檢視到 propsstate 的值產生變化並再次渲染後才會呼叫到這個方法。

在這個方法裡面,官方文件推薦大家除了可以針對 DOM 進行操作之外,也非常適合做 API 等網路請求。尤其在 props 的值前後有變化的狀況下,可以去觸發網路請求來獲取新的值。

// 在 componentDidUpdate 方法中比較新舊 props 的值
componentDidUpdate(prevProps) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

上面的官網範例程式碼中,我們在 componentDidUpdate() 中使用了 prevProps 參數來比對新舊的 props 值是否有產生變化?再依照判別式的結果做出對應的操作。

備註:prevProps 這個參數顧名思義就是指之前的 props 值,其他參數的使用和功能可以參考這篇 Andy 大大的文章:【React.js入門 - 19】 React生命週期(4/4): Update系列一次講完 裡面有非常詳細的說明。


Updating 更新的這個生命週期就到這邊先結束囉!這裡一樣還是有很多比較不常用的生命週期方法,大家如果有興趣研究的話可以去官網的文件中參考看看。
不過這系列的文主要是針對 React.js 的初學者比較會接觸和使用到的功能來做介紹,所以這邊就不會再多做其他方法的說明了。

非常謝謝看到這裡的大家,如果有任何問題的話真的很歡迎各位大大指教!下一篇就會是最後一個生命週期: Unmounting 了唷~
那我們就下篇見ʘ‿ʘ


上一篇
[ Day 11 ] React 的生命週期 - Mounting
下一篇
[ Day 13 ] React 的生命週期 - Unmounting
系列文
React.js 30 天學習全記錄30

尚未有邦友留言

立即登入留言