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

hiyayiji 發布于2019-08-22 18:30 / 324人閱讀

摘要：技術上來說，當方法被調用后或者發生改變后，方法都會被調用。下一步，會設置為。之后，檢測當前更新是否由更新引起的。這是因為，使用是導致組件持久化更新，而會被方法的返回值重新賦值。

接上文，

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

（未完待續）

云服務器 GPU云服務器源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀 js v8源碼解讀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95924.html

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

摘要：接上文，流程圖我們已經知道掛載的工作流程，現在我們換個方向研究下方法，這個也是的重要組成部分。這個問題，我們會在下一篇文章中進行解答。。。接上文， React流程圖：https://bogdan-lyashenko.gith... this.setState 我們已經知道掛載的工作流程，現在我們換個方向研究下--setState方法，這個也是React的重要組成部分。首先，為什么我...

zhoutk 2019-08-22 18:25 評論0 收藏0
【Under-the-hood-ReactJS-Part6】React源碼解讀

摘要：源碼里有個獨立的模塊管理組件的所有子元素。第一個，實例化子元素使用并掛載它們。至于具體掛載流程，基于子元素類型的不同而有不同的掛載過程。掛載的過程基本完成了。接上文， React流程圖：https://bogdan-lyashenko.gith... 創建初始子組件在之前的步驟里，組件本身的構建已經完成，接下去，我們分析它們的子元素。總共分為兩步：掛載子元素（this.mountC...

codergarden 2019-08-22 18:24 評論0 收藏0
【Under-the-hood-ReactJS-Part9】React源碼解讀

摘要：當鼠標事件發生時，組件的最外層會進行處理，然后通過幾層包裝器的處理后，會開始進行批量更新操作。在這之后，會將這些事件處理成常見到樣子。接上文， React流程圖：https://bogdan-lyashenko.gith... 回到最初在流程圖中，也許你已經注意到，setState方法可以通過幾種方式觸發，更準確的說，可以分為是否由外部引起的（也就是是否由用戶觸發）。讓我們看下如下...

SnaiLiu 2019-08-22 18:29 評論0 收藏0
【Under-the-hood-ReactJS-Part13】React源碼解讀

摘要：接著，將返回的元素和之前的進行比較的，以驗證是否真的需要更新。我們看下代碼，代碼比較簡單好，對應于我們的這個列子，我們對于方法的更改并不會對方法造成影響。所以我們進入下一步，也就是對于節點的更新。接上文， React流程圖：https://bogdan-lyashenko.gith... 如果組件真的需要更新在組件剛開始更新過程時，如果有定義componentWillUpdate方...

jerryloveemily 2019-08-22 18:32 評論0 收藏0
【Under-the-hood-ReactJS-Part4】React源碼解讀

摘要：接上文，流程圖子組件掛載我們繼續探究方法。對于我們的實例代碼而言，就是標簽，所以沒有額外的處理過程。屬性驗證緊接著的被調用的驗證方法用于確保被正確設置，否則，會拋出異常。接上文， React流程圖：https://bogdan-lyashenko.gith... 子組件掛載我們繼續探究mount方法。如果渲染的標簽里有復雜的html標簽，如video，form，textarea等...

evin2016 2019-08-22 18:23 評論0 收藏0