Vue和React中的diff算法核心

虛擬DOM

• js對象替代真實DOM, 更改避免回流(重新渲染),一次性通過render函數渲染成真實DOM
• 聲明的樣子
• 輸出的樣子

實現render函數生成真實DOM

• 設置屬性
• render函數
• 渲染函數

diff算法

• diff算法其實就是對DOM進行different比較不同的一種算法(虛擬的比較更節約性能)
  __ 補丁:用來更新DOM的任務__

比較原則

• 平級對比
  • 
• 不跨級對比(無A__刪除__A)
• 同級復用
  • 

遍歷規則

• 先序深度優先遍歷(從根節點向下級子節點遍歷)
  • 
  • 125叫廣度優先
  • 12345深度優先

實現diff函數

• 比較思路規則
  • 1. type相同,比較屬性,屬性不同生成補丁包patch{type:'ATTRS',attrs:{class:'xx'} }
    2. 新節點在原DOM中不存在{type:'REMOVE',index:xxx}
    3. 節點類型不同,直接替換{type:'REPLACE',newNode:xxx}
    4. 文本變化{type:'TEXT',text:'xxx'}