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會代理真正的原生事件，從而作出相應。