react將dom抽象為虛擬dom, 然後通過新舊虛擬dom 這兩個物件的差異(diff演算法),最終只把變化的部分重新渲染,提高渲染效率的過程; (概念講完再描述一遍)
一句話: 用 js 物件的形式,來表現一棵真是的 dom 樹;
傳統的 diff 演算法也是一直都有的;
react 通過制定大膽的策略，將 o(n^3) 複雜度的問題轉換成 o(n^1=n) 複雜度的問題。
概念: 將新舊兩顆虛擬 dom 樹,按照層級對應的關係,從頭到尾的遍歷一遍,,就能找到那些元素是需要更新的,這種方式: tree diff
1 只會對相同顏色方框內（同級）的dom節點進行比較，即同一父節點下的所有子節點
2 當發現節點已經不存在，則該節點及其子節點會被完全刪除掉，不會用於進一步的比較
複製**
不同元件之間的對比 概念: 在對比每乙個層級的時候,會有自己的元件,這種元件的對比方式就叫: component diff ;
這種對比方法其實比較的就是型別.↓↓↓
同一層級中元素之間的對比
概念: 在型別相同的元件內, 再繼續對比元件內部的元素,檢視內部元素是否相同,如果需要修改,找到需要修改的元素,進行針對性的修改! 這種方式就叫: element diff
三種節點操作：
1 insert_markup（插入）
2 move_existing（移動）
3 remove_node（刪除）
insert_markup：新的 component 型別不在老集合裡，需要對新節點執行插入操作。
move_existing：老的集合包含新的 component 型別，就需要做移動操作，可以復用以前的 dom 節點。
remove_node：老的 component 不在新集合裡的，需要執行刪除操作 或者 老的 component 型別在新集合裡也有，但對應的 element 不同則不能直接復用和更新，需要執行刪除操作
複製**
保持完整的結構,有利於效能的提公升
盡量使用相同型別的元件
在進行 element 或component 級別對比的時候,為了提高對比的效率, react 推薦我們為每個 for 迴圈建立出來的元素或者元件,提供乙個唯一的 key;
tree diff :將新舊兩棵 dom 樹,按照層級對應的關係,這樣只需要對樹進行一次遍歷,就能夠找到哪些元素是需要更新的;
component diff: 在對比每一層的時候,每一層都有自己的元件, 那麼元件之間的對比,叫做 component diff , 對比的方式,就是檢視兩個元件的型別是否相同,如果相同,則暫時認為不需要更新,如果型別不同,則表示更新(先把舊的元件刪除,再建立乙個新的元件,插入到剛才刪除的位置);
element diff:如果新舊 dom 樹中的元件型別相同,會繼續比較這兩個元件內部的元素是否也相同,如果元素發生了改變,則找到需要修改的元素,有針對性的修改,這種元件內部元素級別的對比叫: element diff;
react 虛擬DOM的diff演算法
1 state 資料 2 jsx模板 3 生成虛擬dom 虛擬dom就是乙個js物件，用它來描述真實dom div span hello world 通過這樣的乙個js物件，我們就可以表述上面的dom結構了 4 用虛擬dom的結構，生成真實的dom，來顯示 abc hello world span ...
react 虛擬DOM及diff演算法
在vue,react這些框架中,都是通過監聽資料的變化而相應的去渲染我們的檢視.但是如果每次修改資料就去操作一次dom樹,這在效能上無疑是大打折扣的.虛擬dom的出現就是為了解決這個問題,並且起到協調的作用.本質上就是在js和真實dom樹之間做了乙個快取,具體原理是 每次當資料發生變化時,渲染機制先...
React中的虛擬DOM和diff演算法
react原理 我們來想一下如何實現react 第一種方案 1.state 資料 2.jsx 模板 3.資料 模板 結合,生成真實的dom 來顯示 4.state 發生改變 5.資料 模板 結合,生成真實的dom 替換原始的dom 但這種方案在第五步有著很大的效能缺陷 用新生成的dom去替換原始的d...