react虚拟DOM&diff算法

进化一

• 1.数据state
• 2.JSX 模板
• 3.数据+模板生成真实DOM显示
• 4.state改变，数据+模板结合生成真实DOM替换原有的DOM
• 缺陷：第二次替换第一次的DOM非常耗性能

进化二

• 1.数据state
• 2.JSX 模板
• 3.数据+模板生成真实DOM显示
• 4.state改变
• 5.再次生成真实DOM，但是先不替换
• 6.新旧DOM作对比，找差异
• 7.把差异部分进行替换
• 性能有所提升，但是作比对也会消耗性能

进化三

• 1.数据state
• 2.JSX 模板
• 3.生成虚拟DOM(就是一个js对象，用它来描述真实DOM)(通过createElement把jsx变为JS对象)
  <div id=‘abc’>hello</div>
  
  [‘div’, {id: ‘abc’}, children(span)]
  
  [‘div’, {id: ‘abc’}, [‘span’, {}, ‘hello’]]
  
• 4. 用虚拟DOM结构生成真实DOM显示
     
• 5. state改变
     
• 6. 数据 + 模板 生成新的虚拟DOM
     
• 7. 比较新旧虚拟DOM，找出区别的内容
     
• 8. 直接操作DOM，改变span中的内容
     
• 性能提升，跨端应用得以实现