尚未使用虛擬dom
方案一：
1． state資料
2．jsx模版
3，資料＋模版結合，生成真實的dom，來顯示
4． state發生改變
5. 資料＋模版結合，生成真實的dom，替換原始的dom
缺陷：第一次生成了ー個完整的dom片段
第二次生成了乙個完整的dom片段
第二次的d0m替換第一次的dom，非常耗效能
方案二：
1． state資料
2．jsx模版
3．資料＋模版結合，生成真實的dom，來顯示
4． state發生改變
5。資料＋模版結合，生成真實的dom，並不直接替換原始的dom
6。新的dom（ doucumentfragment）和原始的dom做比對，找差異
7．找出 input框發生了變化
8，只用新的dom中的 input元素，替換掉老的dom中的 input元素
缺陷效能的提公升井不明顯
使用虛擬dom：
1. state歜據
2.jsx模版
3.資料＋模版生成虛擬dom(虛擬dom就是乙個js物件，用它來描述真實dom）（損耗了效能）
［＇div＂，，＇ hello world]]
4.用虛擬dom的結構生成真實的d0m，來顯示
heillo world
5. state發生變化
6.資料＋模版 生成新的應擬dom（極大的提公升了效能)
[＂div，tid：＇abc'｝。［＇span'，{}，＂ bye bye＂]]
7.比較原始虛擬dom和所的虛擬dom的區別，找到區別是span中內容（極大的提公升效能）
8.直接操作dom，改變span中的內容。
優點1.效能提公升了
2.它使得跨端應用得以實現。react native
虛擬 DOM 實現原理
為什麼要用？好處是啥 直接操作dom引發頁面重排重繪，頻繁操作會造成頻繁渲染，非常消耗效能 我們希望的是每次修改能夠只修改我們想要修改的dom而不是重新渲染所有的dom 而虛擬dom的思路是 前提關鍵是 在虛擬dom樹上的操作不會渲染到檢視 一 將dom樹轉換成js物件樹，產生第乙個虛擬dom樹 與...
虛擬dom 虛擬 DOM 和 DOM diff
乙個能代表dom樹的物件，通常含有標籤名 標籤上的屬性 事件監聽和子元素及其它屬性。虛擬dom在vue和react中的示例 const rnode classname red 標籤上的屬性 onclick 事件 ref null,type div 標籤名 or 元件名 const vnode 事件 ...
虛擬DOM與真實DOM
先來個簡單的react例子 1.建立虛擬dom const vdom hello react h1 此處不要寫引號，因為不是字串 2.渲染虛擬dom到頁面 reactdom.render vdom document.getelementbyid test script head test div b...