【Under-the-hood-ReactJS-Part11】React原始碼解讀

越山發表於2018-07-05

接上文,

React流程圖:
https://bogdan-lyashenko.gith…

更新元件

關於元件的更新,我們先看下程式碼裡的註釋:

對於已掛載元件的更新過程,React會首先呼叫componentWillReceiveProps和shouldComponentUpdate這兩個方法。然後,在更新沒有跳過的前提下,剩下的有關更新的生命週期方法會被呼叫,在這之後,DOM節點會被最終更新。預設情況下,DOM的更新會使用React中的虛擬DOM演算法,有特殊需求的客戶端可能需要覆蓋相關實現。(‘Perform an update to a mounted component. The componentWillReceiveProps and shouldComponentUpdate methods are called, then (assuming the update isn’t skipped) the remaining update lifecycle methods are called and the DOM representation is updated. By default, this implements React’s rendering and reconciliation algorithm. Sophisticated clients may wish to override this.’)

看起來還是比較合理的一個過程。

以上過程中,我們做的第一件事就是檢測props是否改變。技術上來說,當setState方法被呼叫後或者props發生改變後,updateComponent方法都會被呼叫。如果props真的發生了改變,那麼生命週期方法componenttWilllReceiveProps就會被呼叫。之後,React會基於阻塞狀態佇列(我們之前設定的存放區域性state的佇列,在我們的例子裡會像這個樣子:[{message:”click state message”}])裡的state重新計算nextState,當然,如果只是props發生了改變,那麼state相關操作不會被執行。

下一步,React會設定shouldUpdate為true。這個也是為什麼預設情況下我們不需要重寫shouldComponentUpdate方法的原因,React中,元件就是預設更新的。之後,檢測當前更新是否由forceUpdate更新引起的。 更新一個元件,除了更改state和props外,也是可以通過呼叫forceUpdate方法來實現的,但是,React官方文件裡認為應該避免使用這個方法。這是因為,使用forcuUpdate是導致元件持久化更新,而shouldUpdate會被shouldComponentUpdate方法的返回值重新賦值。如果最終判斷元件是不需要被更新的,React還是會設定props和state,但是會跳過更新流程的其他部分。

(未完待續)

相關文章