React.js 已經(jīng)成了當紅炸子雞，不會React.js都不好意思說自己會前端了。其中，虛擬DOM是其主要的特性。
那么它相對于其他雙向綁定模有什么異同嗎？
無論是angular還是vue，對于動態(tài)綁定的重新渲染，取決與model的數(shù)值變化，而react則是虛擬樹的比較。我們來看看react的渲染流程。
1.創(chuàng)建一棵虛擬的dom樹。
2.渲染到真實dom中。
3.model數(shù)據(jù)變化，告訴react重新在內(nèi)存中生成新的虛擬dom樹。
4.新的虛擬dom樹與舊的dom樹進行對比，提取兩棵樹不同的節(jié)點部分。
5.將變化部分，渲染到真實的dom上。
來談?wù)剅eact.js的優(yōu)勢
1.react關(guān)注的是渲染效果，如果渲染效果一樣的情況，哪怕model產(chǎn)生變化也不會產(chǎn)生重新渲染，舉個例子，<p>{{demo1}}</p> ，假設(shè)demo1變量數(shù)值是hello world，那么渲染出來的dom 即是 <p>hello world</p>，當我們換了一個變量demo2，即<p>{{demo2}}</p>demo2`的數(shù)值也是"hello world"，對于傳統(tǒng)的雙向綁定框架，肯定認為數(shù)值變化了，需要重新渲染，而react因為是直接對新舊樹之間的比較，兩個樹一樣舊不用重新渲染了。
2.簡化了框架的更新邏輯，在前文中，可以看出來我直接讓model屬性與dom元素綁定了，當我修改model屬性的時候，能夠直接修改dom元素，能做到O(1)的搜索，這是我對mvvm的簡單優(yōu)化，但對于一個復(fù)雜mvvm框架來說，算法可沒有那么容易，dom結(jié)構(gòu)隨時都可能被刪除，添加各種操作，稍微不慎就會導(dǎo)致更新失敗或無法做到優(yōu)化，對于虛擬dom穩(wěn)定控制在o(n)內(nèi)，無論操作有多么復(fù)雜。
3.以上都是我個人理解reactjs的優(yōu)勢，知乎里面也有精彩的討論，可以參考
https://www.zhihu.com/question/31809713
代碼實現(xiàn)
1.構(gòu)造虛擬dom樹系統(tǒng)，是比較復(fù)雜的代碼，足夠?qū)懸黄恼?，由于不是本文的重點，這里采用的是開源項目
https://github.com/livoras/simple-virtual-dom
主要使用的是
var svd = require('simple-virtual-dom')
var el = svd.el //構(gòu)造dom樹元素
var diff = svd.diff // 對新樹與就樹之間做對比，找出不同的地方
var patch = svd.patch // 將dom樹變動部分變化，應(yīng)用到原來的dmo上
2.生成虛擬dom樹
genVTree: function (model) {
return el('div', {'id': 'container'}, [
el('span', [model.time])
]);
},
3.插入虛擬dom樹到真實dom
var vTree = this.genVTree(this.model);
this.tree = vTree;
this.root.appendChild(vTree.render());
4.產(chǎn)生數(shù)據(jù)變化，當數(shù)據(jù)變化的時候，重新生成虛擬dom樹，與舊的dom樹進行比較，找出不同的dom部分，并將該部分的改動應(yīng)用到真實dom樹里。
setState(object) {
var self = this;
var oldTree = this.tree;
Object.keys(object).forEach(function (key) {
self.model[key] = object[key];
});
var newTree = this.genVTree(this.model);
this.tree = newTree;
var patches = diff(newTree, oldTree);
patch(this.root, patches);
},
setInterval(function () {
demo.setState({time: Date()})
}, 1000);
5.代碼實現(xiàn)
http://codepen.io/youyudehexie/pen/BjQZEo
