3.2 lifecycle

Mounting(載入)

元件正要被載入DOM中階段

• componentWillMount() 這個方法是在我們元件第一次要render到畫面前會執行，整個生命過程只會執行一次，基本上這個方法不會有太多用到的地方，不在此階段進行AJAX 主要是因為，沒辦法很確定你對資料的請求能在畫面render之前處理好。

• componentDidMount() 當畫面render完畢後就會馬上觸發該方法，大部分AJAX要進行處理都是在這個方法裡面調用。

Updating(更新)

遇到state的改變然後重新re-render階段

• componentWillRecieveProps(nextProps) 這個方法並不會再初始化的時候觸發，只有在元件接收到新的props才會調用，而舊的props是可以用this.props來調用，所以你可以在這個方法中去比較新舊props的不同並且去調用setState()，不過在這階段並不會重新render。

• shouldComponentUpdate(nextProps, nextState) 這個方法回傳的是一個布林值，讓你去比較新舊state跟新舊props是否相同，並且決定要不要去做re-render。

• componentWillUpdate 到了這個方法就是更新前的階段了，簡單來說就是在你接收到新的state之後要進行re-render前的這個時間點，你想要執行什麼都是在這個方法來調用。在這個方法中你不能去調用setState()，那會讓你的程式陷入initial loop(無窮迴圈)，因為你在這個階段setState就表示你要更新，他就又會跳回來這個更新前的方法，一直持續下去。

• componentDidUpdate 當元件re-render更新完後的時間點就是調用這個方法的時候，會用到的東西其實跟前面的componentDidMount()差不多，當你的畫面都render出來，你可能想要去對一些DOM來進行操控，那這些就可以寫在這個方法裡面。打個比方來說你可能在初始階段的componentDidMount()有用JQuery來做一些效果，所以一旦當你state改變後並重新render完，你還想要做出那些效果，那你就必須在這個方法裡面再寫一次。

Unmounting(卸載)

元件要從DOM移除階段

• componentWillUnmount 這個方法會在元件從DOM移除之後馬上調用，功用就只是用來清除一些可能之前有調用的函數之類的。