從圖中可以清楚了解整個React元件生命週期的觸發時間點

元件執行生命週期方法可分為三種

1. Mounting:會在元件建立時被執行
   • constructor()
     上一篇有稍微提到，這是es6的class語法糖，建構並初始化物件
   • componentWillMount()
     緊接在costructor後執行componentWillMount，只會在初始執行一次
   • render()
     執行setState和更新父元件所傳遞的props，都會執行render()。
   • componentDidMount()
     會在render執行完成後調用，這應該是最常用到的生命週期，像是綁定DOM事件、執行ajax，多半會在這裡使用。另外，若在這裡使用setState會使render執行兩次。
2. Update
   • componentWillReceiveProps
     當元件接受到新的(更新)props時，會被執行，如果需要在props變更時改變state狀態，就可以在這處理。
   • componentWillUpdate(nextProps,nextState):17版將棄用
   • render()
   • componentDidUpdate(prevProps,prevState,snapshot)
     Update階段最後一個執行的方法，在畫面渲染更新後調用，通常在這裡處理call api或是setState，但要記得判斷時機(建議加入判斷式)，否則會進入無限迴圈。
3. Unmounting:移除的時候會執行
   • componentWillUnmount()
     當component將要從DOM被移除前會執行這個方法，在 componentDidMount()方法做的設定，如果需要被終止或移除，就需要在這方法執行。

另外，要注意不能使用setState的方法有:

• render
• componentWillMount
• componentWillUpdate

如果是新手光看文件是不夠的，記得動動手練習才是真正的認識這些「朋友」!

以上如果有錯誤，歡迎大家不吝指教，感謝!