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

接上文，

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，可是會跳過更新流程的其餘部分。

（未完待續）