虚拟DOM和Diff算法

当我们更新了state中的值的时候，React会去调用render()方法来重新渲染整个组件的UI，但是如果我们真的去操作这么大量的DOM，显然性能是堪忧的。所以React实现了一个Virtual DOM，组件的真实DOM结构和Virtual DOM之间有一个映射的关系，React在虚拟DOM上实现了一个diff算法，当render()去重新渲染组件的时候，diff会找到需要变更的DOM，然后再把修改更新到浏览器上面的真实DOM上，所以，React并不是渲染了整个DOM树，Virtual DOM就是JS数据结构，所以比原生的DOM快得多。

用算法实现虚拟DOM：

function VDOM(tagName, props, children) {
    this.tagName = tagName;
    this.props = props;
    this.children = children;
}
VDOM.prototype.render = function() {
    // 建立一个真实元素
    var el = document.createElement(this.tagName);
    
    // 往该元素上添加属性
    for (var name in this.props) {
        el.setAttribute(name, this.props[name]);
    }
    
    // children是一个数组
    var children = this.children || [];
    for (var child of children) {
        var childEl = (child instanceof VDOM) ? child.render() : document.createTextNode(child);
        // 无论childEl是元素还是文字节点，都需要添加到这个元素中。
        el.appendChild(childEl);
    }
    return el;
}