react原理
我們來想一下如何實現react
第一種方案：
1. state 資料
2.jsx 模板
3. 資料 + 模板 結合, 生成真實的dom
, 來顯示
4. state 發生改變
5. 資料 + 模板 結合, 生成真實的dom
, 替換原始的dom
用新生成的dom去替換原始的dom, 非常消耗效能
第二種方案
1. state 資料
2.jsx 模板
3. 資料 + 模板 結合, 生成真實的dom
, 來顯示
4. state 發生改變
5. 資料 + 模板 結合, 生成真實的dom
, 並不直接替換原始的dom
6. 新的dom
(documentfragment) 和原始的dom 做比對，找差異
7. 找出有差異的dom元素
8. 將有差異的dom元素替換掉舊的dom元素
關鍵在於第六步，我們找新dom和原始dom的比對找差異過程中，也很消耗效能，效能提公升並不明顯
第三種方案：虛擬dom
1. state 資料
2.jsx 模板
3. 生成虛擬dom
(js物件)
, 用js物件描述dom資訊
, children:
}4. 借助虛擬dom
, 生成真實的dom
, 來顯示
'root'
>
hello, world<
/p>
<
/div>
5. state 發生改變
6. 生成新的虛擬dom
7. 比較原始虛擬dom和新的虛擬dom的差異
8. 直接操作dom，改變有差異的內容優點：生成 js 物件很快, 所以在兩個js物件中找差異 損耗效能很小
極大的提公升了效能
diff演算法用於比較虛擬dom之間的差異
diff演算法通過逐級的去比較兩顆節點樹的差異，大大降低了複雜性
假設我們有乙個元件，它在乙個迭代中渲染了5個元件，而下一次渲染的時候在元件列表的中間插入乙個新的元件。 只是通過這個資訊真的很難知道如何在兩個元件列表之間進行對映。
預設情況下，react將先前列表的第乙個元件與下乙個列表的第乙個元件相關聯，等等。您可以提供乙個key屬性，以幫助react去找到他們的對映關係。 在實際中，這通常很容易把剛剛插入的元件從他們當中找出來。
React 中的虛擬DOM
react 的重新渲染，效能是很高的。因為它引入了虛擬dom的概念。呃，來看一下，render 函式渲染頁面的幾種做法。前兩步都是拿到state 資料 與 jsx模版。第一種就是比較樸素的方式。第二種方式雖然不用完全替換，但是也需要比對兩個dom。第三種是虛擬dom方式。虛擬dom 本質上就是 js...
react中的虛擬DOM
資料驅動原理 用虛擬dom 1.state資料 2.jsx模板 3.資料 模板相結合，生成虛擬dom 虛擬dom就是乙個js物件，用它來描述真實的dom div span hello 損耗了極小的效能 4.用虛擬dom的結構生成真實的domhello 5.state 發生變化 6.資料 模板 生成新...
對react中虛擬dom和diff演算法的理解
直接使用dom進行操作時排版與重繪的效率低，速度慢。例如插入乙個dom元素，元素本身或者繼承很多屬性，還需要註冊很多方法，導致乙個建立乙個簡單的dom也要消耗很多時間。虛擬dom是在首次渲染dom時，多了一層虛擬dom的計算，在dom的基礎上建立了乙個抽象層。當有改動時，會生成乙個新的虛擬dom與上...