React 虛擬DOM+components+生命週期的聯繫

React 虛擬DOM+components+生命週期的聯繫

React-虛擬DOM分析

從瀏覽器渲染角度說React爲何會使用虛擬DOM

虛擬DOM的原理

如下是綜各個資料後的我的理解，若有問題請指出

從瀏覽器渲染角度說React

首先要知道React是由Facebook對現有業務進行改進提高的時候提出來的。DOM是很慢的，其元素很是龐大，頁面的性能問題鮮有由JS引發的，大部分都是由DOM操做引發的。全部Facebook在React中引入了頁面UI組件化、虛擬DOM，來解決這些問題。
React.js對經常使用組建進行了優化,它算是一個components組件庫。ReactDom.js是React版本優化的虛擬DOM
若是要渲染到最後Display顯示，須要通過很長過程，瀏覽器會先收集到HTML和CSS，對HTML和CSS分別通過Parser剖析器，分別生成DOMTree和CSSRuleTree。 DOM和CSSOM合併後生成Render Tree。
React.js但願用JSX語言寫出HTML和CSS還有頁面邏輯混合在一塊兒成爲一個component，（在react編寫的時候就是經過class繼承的react.component這個類），直接經過JS對象的形式生成了ReactRenderTree。
我以爲這是原型鏈的🌲樹狀結構化，ReactRenderTree（React生命週期）在經過虛擬DOM（ReactDom.js），首次生成給到瀏覽器的時候就是一個瀏覽器直接能夠識別的RenderTree，瀏覽器直接Painting，而後顯示在頁面上。
虛擬的DOM的核心思想是：對複雜的文檔DOM結構，提供一種方便的工具，進行最小化地DOM操做
當須要重排時Reflow

React會經過虛擬DOM對新生成的DOM和原來的DOM樹進行對比，改變頁面
虛擬DOM的原理

虛擬DOM相似於（自動化控制的網頁生成器）經過Node節點render生成相對應的網頁，但主要功能在於網頁更新時候，對於Node節點的更新，虛擬DOM會比較兩棵DOM樹的區別，保證最小化的DOM操做，使得執行效率獲得保證。
因爲計算兩棵樹的常規算法是O(n^3)級別，DOM結構達到成百個節點在實際項目中很正常，因此須要優化深度遍歷的算法。
React diff 策略

Web UI 中 DOM 節點跨層級的移動操做特別少，能夠忽略不計。

擁有相同類的兩個組件將會生成類似的樹形結構，擁有不一樣類的兩個組件將會生成不一樣的樹形結構。

對於同一層級的一組子節點，它們能夠經過惟一 id 進行區分。

基於以上三個前提策略，React 分別對 tree diff、component diff 以及 element diff 進行算法優化，事實也證實這三個前提策略是合理且準確的，它保證了總體界面構建的性能。

React的侷限性，不適合每一個頁面使用率很低網站，（每一個頁面頁面邏輯不一樣）;

知乎-React 源碼剖析系列 － 難以想象的 react diff
地址：https://zhuanlan.zhihu.com/p/20346379