我想說的是
當組件被更新以及刪除的時候 react 的程式流程

錯誤處理

當一個組件在 render 的過程、生命週期
或在某個子組件的 constructor 中發生錯誤時，這些方法會被呼叫：

1. static getDerivedStateFromError()
2. componentDidCatch()

更新

當 prop 或 state 有變化時，就會產生更新
當一個組件被重新 render 時，生命週期將會依照下列的順序呼叫這些方法：

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

shouldComponentUpdate()

shouldComponentUpdate() 會在新的 prop 或 state 被接收之後並在該 component 被 render 之前被呼叫。其預設值是 true。這個方法並不會 component 初次 render 時或使用 forceUpdate() 時被呼叫。
使用 shouldComponentUpdate() 讓 React 知道一個組件的輸出並不會被目前在 state 或 prop 內的改變所影響
預設行為是每當 state 有所改變時就重新 render，在絕大多數的情況下，應該依賴這個預設行為。
這個方法的存在著要是為了效能最佳化
不要依賴這個方法來「避免」 render，因為這很有可能會導致 bug

componentDidUpdate()

會在更新後馬上被呼叫，這個方法並不會在初次 render 時被呼叫。

在組件更新之後，可以在此處對 DOM 進行運作
如果有比較目前的內容和之前的內容的話，此處也適合做網路請求
可以馬上在 componentDidUpdate() 內呼叫 setState()，但是必須比較前後值得變化
否則會陷入無窮迴圈中

Unmounting

當一個 component 被從 DOM 中移除時，這個方法將會呼叫：

componentWillUnmount()

componentWillUnmount() 會在ㄧ個組件被 unmount 和 destroy 後馬上被呼叫
你可以在這個方法內進行任何清理，像是取消計時器和網路請求

不應該在 componentDidUpdate() 內呼叫 setState()
因為這個組件不會重新 render
當一個組件被 unmount 後，它就永遠不會再被 mount！

使用了兩篇概略了介紹了 react 中的生命週期
蠻方便的，可以根據不同階段去執行不同的事件，而不是全部完成頁面渲染之後才去變更
這個可控性令人喜愛