iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 23
1
Modern Web

被 React react 的後端工程師系列 第 23

[DAY23] 生命週期 2 生命如此變化無常之然後呢之然後他就死掉了

我想說的是
當組件被更新以及刪除的時候 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 中的生命週期
蠻方便的,可以根據不同階段去執行不同的事件,而不是全部完成頁面渲染之後才去變更
這個可控性令人喜愛


上一篇
[DAY22] 生命週期 1 生命之初生命起源生命之水
下一篇
[DAY24] 活用生命週期的奧秘之提升效能
系列文
被 React react 的後端工程師30

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-01-18 06:45:28

之然後他就死掉了 /images/emoticon/emoticon04.gif

我要留言

立即登入留言