今天要來進入到生命週期的第二個環節： Updating 更新，繼上篇的 Mounting 元件掛載階段中提到過有一個方法是在 Updating 階段也會出現的，那我們就接著繼續看下去吧！

Updating 更新

當一個 Component 內的 props 或 state 的值有變化時，就會產生更新（ Update ）並重新渲染畫面。

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

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

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

render()

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

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

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

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

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

componentDidUpdate(prevProps, prevState, snapshot)

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

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

在這個方法裡面，官方文件推薦大家除了可以針對 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 了唷～
那我們就下篇見ʘ‿ʘ