1. 程式人生 > >簡談對虛擬Dom的理解

簡談對虛擬Dom的理解

簡單說一下我自己對虛擬DOM的理解。。。。     由於  jquery+es6模板字串(渲染dom)=》真實的渲染  效能巨差   所以 為了提高效能虛擬DOM就是把真實的DOM轉成JS 物件樹 虛擬DOM建立以後(也就是componentWillMounted完成的時候 就建立了這個源樹)根據元件內部的state 父元件的props 以及redux 的全域性狀態的更新 導致產生新的js物件樹(就是目標樹) 通過diff比較演算法來比較兩顆樹的不同 把不同的節點在DOM樹上渲染一下 diff演算法是逐層比較 發現相同的就保留 發現刪除的就刪除 發現新增的就新增 這層比較把複雜度由O(n^3)降低到O(n^1)這個逐層比較會帶來新的問題 1.如果這個變化比較複雜 2.兄弟節點需要排序插入的時候 這兩種都是低效的  react產生兩個假設 1.兩個相同元件產生類似的DOM結構,不同的元件產生不同的DOM結構 2.對於同一層次的一組子節點 他們可以通過唯一的ID進行區分 事實上這兩個假設成立1. 因為同一個元件的結構是穩定的 修改狀態時只改變區域性的內容 2.在使用者開發時可以加一個id進行區分 所以diff演算法是成功的