React Lifecycle : Updating

這篇文章要來跟大家分享關於React Lifecycle的使用,因為在開發專案上時,對於Lifecycle還沒完全搞懂狀況下,Updating時偶爾會出現意料之外的事情發生,所以弄個簡單的例子來了解Updating Lifecycle。

DEMO

React Updating Lifecycle Methods :

  • componentWillReceiveProps
  • componentWillUpdate
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate

我們先從最底下的Children來了解,如果本身的state改變,Children的Updating Lifecycle 會觸發 :

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

shouldComponentUpdate它需要return true,Lifecycle才會往下繼續走,return false時Lifecycle便會中止,而不會往下觸發render。這裡頭就可以下判斷

return this.props !== nextProps || this.state !== nextState;

當props跟state真的有不同時,才繼續Updating Lifecycle。


接著往上一層來看Parent,如果本身的state改變了,Parent的Updating Lifecycle會觸發 :

shouldComponentUpdate

componentWillUpdate

render

這時,Children component雖然沒有跟Parent綁定任何Props,也會因為Parent改變而會觸發Updating :

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

特別的是componentDidUpdate,它會從底層往回開始觸發,在Children render完後,componentDidUpdate依序觸發:

[Children] componentDidUpdate

[Parent] componentDidUpdate

所以從Root層更新state後,底下的children就會一併觸發Updating Lifecycle。


Updating Lifecycle的坑!

從React Updating Lifecycle的特性來思考,在設計component時,應該要盡量避免在componentWillReceiveProps中去做邏輯判斷,因為在複雜的巢狀下,componentWillReceiveProps被觸發時機點就會很難掌控也很不容易追蹤,容易出現預料之外的狀況。

更多

React Component Specs and Lifecycle
Execution sequence of a React component’s lifecycle methods
REACT TIPS AND BEST PRACTICES

One thought on “React Lifecycle : Updating

  1. 所以大大的建議是把componentWillReceiveProps做的事,
    移到shouldComponentUpdate裡做嗎?

    我目前是把父傳props給子的相應邏輯操作寫在子的componentWillReceiveProps裡面

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *