diff algorithms in the core Vue and React

Virtual DOM

• js real alternative to DOM objects, change to avoid reflux (re-rendered), real-time rendering to render function by DOM
• Statement way
• The output looks like

DOM real realization render function generator

• Setting Properties
• render function
• Rendering function

diff algorithms

• diff algorithm is actually the DOM compare different kind of algorithm (Virtual relatively more economical performance)
  __ Patch: used to update the DOM tasks __

The comparison rules

• Contrast same level
  • 
• No cross-level contrast (no A__ delete __A)
• At the same level multiplexing
  • 

Traversal rules

• Preorder depth-first traversal (towards lower sub traversed from the root node)
  • 
  • 125 called breadth-first
  • 12345 Depth-first

Diff function to achieve

• Compare ideas rule
  • 1. The same type, compare attributes, different attributes to generate patches patch{type:'ATTRS',attrs:{class:'xx'} }
    2. The new node does not exist in the original DOM{type:'REMOVE',index:xxx}
    3. Different types of nodes, direct replacement{type:'REPLACE',newNode:xxx}
    4. Text change{type:'TEXT',text:'xxx'}