資料驅動原理
用虛擬dom：
·1. state資料
·2. jsx模板
·3. 資料 + 模板相結合，生成虛擬dom（虛擬dom就是乙個js物件，用它來描述真實的dom）['div', , ['span', {}, 'hello']]（損耗了極小的效能）
·4.用虛擬dom的結構生成真實的domhello
·5. state 發生變化
·6. 資料 + 模板 生成新的虛擬dom （極大地提公升了效能）['div', , ['span', {}, 'bye']]
·7. 比較原始虛擬dom和新的虛擬dom的區別，找出區別是span中的內容
·8. 直接操作dom，改變span中的內容
使用虛擬dom完成資料驅動涉及到關鍵的一點就是如何比較兩個虛擬dom的差異
同層比對，列表使用不同的key值
用虛擬dom完成資料驅動涉及到關鍵的一點就是如何比較兩個虛擬dom的差異
實現虛擬dom的目的
為了實現頁面中，dom元素的高效更新，優化效能
參考文件
深度剖析
React 中的虛擬DOM
react 的重新渲染，效能是很高的。因為它引入了虛擬dom的概念。呃，來看一下，render 函式渲染頁面的幾種做法。前兩步都是拿到state 資料 與 jsx模版。第一種就是比較樸素的方式。第二種方式雖然不用完全替換，但是也需要比對兩個dom。第三種是虛擬dom方式。虛擬dom 本質上就是 js...
react虛擬DOM 中的 diff 演算法
定義 state,有了資料 有乙個模板 資料 模板生成虛擬 dom 虛擬 dom 就是乙個 js物件,用它來描述真實 dom 用虛擬 dom 的結構生成真實的 dom,來顯示 state 發生變化 資料 模板 生成新的虛擬 dom 極大地提公升效能 比較原始虛擬 dom和原始虛擬 dom的區別,找到...
React中的虛擬DOM和diff演算法
react原理 我們來想一下如何實現react 第一種方案 1.state 資料 2.jsx 模板 3.資料 模板 結合,生成真實的dom 來顯示 4.state 發生改變 5.資料 模板 結合,生成真實的dom 替換原始的dom 但這種方案在第五步有著很大的效能缺陷 用新生成的dom去替換原始的d...