最近在學習React生命週期，筆記記了一堆，越記越亂(-.-)，於是打算去做個圖幫助自己理解，先後順序基本都自己驗證過，有錯誤或補充的歡迎底下評論~

參考了：https://zhuanlan.zhihu.com/p/392532496、https://www.jianshu.com/p/b331d0e4b398、https://www.cnblogs.com/qianxiaox/p/13825985.html、https://www.bilibili.com/video/BV1dP4y1c7qd?p=54

初始化/掛載階段

• [x]componentWillMount()
• render()：渲染元件，可訪問props和state。不能直接修改狀態，否則進入死迴圈，如圖可見，改變狀態後都會重新從上面開始走，到了render後又改狀態了，又上去了。
• componentDidMount()：掛載完畢。元件一輩子也就這一次。此時DOM已生成，可以使用那些依賴DOM的外掛啦~也可以axios進行一些初始化

更新階段

• [x]componentWillReceiveProps(nextProps)：最先獲取父元件傳來的屬性。可對比新舊屬性nextProps和this.props；主要應用時根據父元件的props更改元件自身的state，與vue中的computed有一些相似。（*被遺棄的原因是過於敏感了，即使父元件更新的狀態自己不用，它也要呼叫一次。）

• [x]componentWillUpdate(nextProps,nextState)

• shouldComponentUpdate(nextProps,nextState)：根據更新的props或state判斷要不要重新渲染。通過this.props和this.state可獲取老屬性和老狀態，經過對比後返回布林值，決定要不要重新渲染。對於複雜的狀態或屬性，可在JSON.stringify()之後再對比。（*效能優化必備）

• componentDidUpdate(prevProps,prevState,value)

• [new~]static getDerivedStateFromProps(nextProps,nextState)：初始化或setState時，通過return{}合併原狀態。配合componentDidUpdate進行非同步請求，取代了componentWillReceiveProps。
• [new~]getSnapShotBeforeUpdate()：在render之後記錄歷史狀態。比如在新DOM插入之前記錄滾動距離，return值之後，配合componentDidUpdate(prevProps,prevState,value)進行操作，值將儲存在第三個屬性value中。

銷燬階段

• componentWillUnmount()：window視窗的事件監聽、倒計時等不會因為dom消失而銷燬，需要在這裡將事件清空。