一、DOM :文档对象模型

在当今的web程序中，由于SPA类型项目的出现，DOM tree的结构也变得越来越复杂，它的该表内也变的越来越频繁，也有可能有非常多的DOM操作（添加，删除，修改，事件监听，事件回调，事件销毁等）。由于DOM tree结构的变化，会导致大量的reflow，从而影响性能。

二、虚拟DOM

虚拟DOM是对立React而存在的，只不过React在渲染的时候采用了这个技术来提高效率。

• DOM 是笨重而庞大的，因为它包含非常多的API方法和属性。可不可以用JS的方法来表述它呢？用轻量级的数据能完全代替复杂且庞大的DOM结构~~~

//一个DOM结构如下：
 <div id="contanier">
        <h1>Hello World!</h1>
 </div>

//用js描述吧
var element ={
        tagName:'div',
        attr:{
            props:{
                id:'contanier'
            },
            style:{
                color:'red'
            }
        },
        children:{
            tagName:'h1',
            children:'Hello World!'
        }
    }
//用构造函数模拟一下吧
 function ELement (tagName,attr,children) {
        this.tagName=tagName;
        this.props=props;
        this.children=children;
    }
    var headline=new Element('h1',null,'Hello World!');
    var div=new Element('div',obj,headline)
    var obj={
        props:{
            id:'contanier'
        },
        styles:{
            color:red
        }
    }

JSX转换之后

 // JSX转换之后调用的真正的API是React.creatElement();
    let headline=React.creatElement('h1',null,'Hello World!');
    let app=eact.creatElement('div',{id:'container',styles:{color:'red'}},headline)


//JSX写法
    let styles={
        color:'red'
    } ;
    let app=<div id="contanier" styles={styles}>
            <h1>Hello World!</h1>
        </div>;

• JSX是一种创造ReactElement的便捷写法；
• ReactElement是一种轻量级的，无状态的，不可改变的，DOM元素的虚拟表述。
• 用JSX创建ReactElement，将其插入真正的DOM中，可调用ReactDOM中的render方法。

import {render} from 'render-dom';
import App from './App';

render(<App />,document.getElmentById('root'));

与DOM相比较：虚拟DOM的优势

• 在虚拟DOM结构中，当发生任何更新的时候，这些变更都会发生在虚拟DOM树shang上面，这个操作都是JS对象的操作，速度更快。
• 当更新完成时，就会产生一颗新的虚拟DOM树。引入Diff算法，比较两棵树的差异。到目前为止，没有做任何的DOM操作，只是JS的计算和操作。
• 最后，这个差异会作用到真正的DOM上。

通过这种方法，可以让DOM操作最小化，做到效率最高。

小结一下虚拟DOM运作的流程

1. 构建虚拟DOM树结构；
2. 将虚拟DOM树插入真正的DOM中；
3. 更新后，产生新的虚拟DOM树；
4. 通过Diff算法计算出两个树的不同；
5. 在DOM元素中使用变更：将计算出的不同作用的DOM上。