定義 state,有了資料
有乙個模板
資料 + 模板生成虛擬 dom(虛擬 dom 就是乙個 js物件, 用它來描述真實 dom)
用虛擬 dom 的結構生成真實的 dom, 來顯示
state 發生變化
資料 + 模板 生成新的虛擬 dom (極大地提公升效能)
比較原始虛擬 dom和原始虛擬 dom的區別, 找到區別是 span 中內容
直接操作 dom, 改變 span 中的內容
那第七步是如何比對的, 採用的就是 diff 演算法.
什麼時候會被比對? :
當資料發生改變的時候, 虛擬 dom 才會做新的比對
那麼什麼時候資料發生改變?
要麼改變了 state, 要麼改變 props, 其實 props 發生改變也是父元件的 state 發生改變, 所以歸根結底其實都是呼叫 setstate 的時候資料發生變化, 虛擬 dom 才進行比對.
那麼再說一下 setstate,
為什麼它是非同步的, 是為了提公升底層效能. 多次 setstate 變更成 1 次, 節省效能上的耗費
左側是個虛擬 dom, 資料發生改變時, 右側生成乙個新的虛擬 dom, 進行同層比對, 比較最上面第一層看差異, 如果一致, 到下一層, 發現不一致, react 就不會往下比了. 於是把原始頁面上的虛擬 dom 對應下面所有的節點 dom都刪除, 重新生成一遍節點下的所有 dom, 用重新生成的替換原始頁面上的 dom, 也就是只比對一層虛擬 dom.
這麼做效能上其實讓一部分節點無法復用, 雖然造成渲染浪費, 但是這種比對的好處是比對的演算法簡單, 只需要一層層對比, 對比速度快. 減少了比對演算法上的效能消耗.
為什麼需要 key 值
如果 key 值一旦是 index 的話, 就無法保證在原始的虛擬 dom樹上的 key 值和新虛擬 dom 樹上的 key 值一致.
所以為了穩定和效能
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演算法
react原理 我們來想一下如何實現react 第一種方案 1.state 資料 2.jsx 模板 3.資料 模板 結合,生成真實的dom 來顯示 4.state 發生改變 5.資料 模板 結合,生成真實的dom 替換原始的dom 但這種方案在第五步有著很大的效能缺陷 用新生成的dom去替換原始的d...