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会代理真正的原生事件，从而作出相应。