第 13 天啦～～～

昨天我們談到 lifecycle，

那我們今天來稍微介紹一下，在生命週期每個階段的流程吧

那在 v15 -> v16 時，

React 官方有針對 lifecycle 做一些調整，

那某些不安全的部份，會在前面多一個 UNSAFE_，

來提醒開發者盡量不要使用

Mounting

元件建立的流程，還未再入到實體網頁時

1. constructor

• state 、 function or 其他變數 初始化的地方

1. UNSAFE_componentWillMount

• 在 component 初始化的時候，在 render 執行之前
• 有建立 getDerivedStateFromProps 會失效

3. static getDerivedStateFromProps(nextProps, prevState)

• 在 component 尚未 render 之前，用來與父層的 props 做交接，需回傳一個物件，此物件內容會被當做最新的 state
• 這個 function 為 static 固是抓不到當下 component 的 this
• 有建立此 function ， UNSAFE_componentWillMount 會失效

4. render

• 欲要渲染到真實畫面前的最後動作，在這裡回傳 react element ，會根據 react element 的變化，來影響真實畫面

5. componentDidMount

• 只會執行一次，在 component 渲染到真實畫面之後觸發

Updating

元件畫面更新的流程，再觸發 re-render 會啟用

1. UNSAFE_componentWillReceiveProps(nextProps)

• 由父層 props 更新時會被觸發
• 有建立 getDerivedStateFromProps 會失效

2. getDerivedStateFromProps
3. shouldComponentUpdate(nextProps, nextState)

• Updating 的流程啟動之後，在 render 之前，返回 false or true，來判斷是否要進入下一個流程

5. UNSAFE_componentWillUpdate（nextProps, nextState)

• render 之前，最後一動
• 有建立 getDerivedStateFromProps 會失效

6. render
7. getSnapshotBeforeUpdate(prevProps, prevState)

• 真實畫面更新之前，當有 return 值，則會帶入到 componentDidUpdate

8. componentDidUpdate(prevProps, prevState, snapshot)

• 真實畫面更新完之後會被觸發
• getSnapshotBeforeUpdate 有返回值則會帶入到第三個參數

Unmounting

當 component 要被移除之時

1. componentWillUnmount

• 在 component 要被卸載之前

上面這些就是 React 的生命週期，

基本上，最常用到的應該會是，

componentDidMount & componentDidUpdate，

第一個是在畫面初始化結束，要執行相應的動作，

第二個則是在更新後，針對某些值來判斷是否要繼續執行某些動作

其他的，使用時目前還抓不太準，

假如各位有經驗的話歡迎留言喔～