React虚拟DOM及Diff算法

什么是虚拟DOM
React会先将jsx转换为js对象，然后将这个js对象转换为真实DOM，这个js对象就是虚拟DOM。
例如：

    <div class="title">
        <span>Hello DOM</span>
        <ul>
            <li>苹果</li>
            <li>橘子</li>
        </u1>
     </div>

React将其转换为类似下面的js对象

const vitrualDom = {
    type: 'div',
    props: { class: 'title' },
    children: [{
        type: 'span',
        children: 'Hello DOM'
    }, {
        type: 'ul',
        children: [{
            type: 'li',
            children: '苹果'
        },{
            type: 'li',
            children: '橘子'~~~~
        }]
    }]
}

• 当我们需要更新DOM时，先创建或改变这个js对象，然后再跟进- vitrualDom更新真正的DOM。
• 当我们需要监听某些DOM事件时，先监听这个vitrualDOM，然后这个vitrualDOM会代理真正的原生事件，从而做出相应。