react简书项目学习笔记9虚拟dom

假想React底层实现
1.state数据
2.jsx模板
3.数据 + 模板 结合，生成真实的dom，来显示
4.state发生改变
5.数据 + 模板结合，生成真是的dom，替换原始的dom、
缺陷：
第一次生成了一个完整的dom片段
第二次又生成了一个完整的dom片段
第二次的dom替换第一次的dom
非常耗性能

第二种假想
1.state数据
2.jsx模板
3.数据+模板结合，生成真实的dom，来显示
4.state发生改变
5.数据+模板结合，生成真实的dom，并不直接替换原始dom
6.新的dom和原始的dom做比对，找差异
7.找出Input框发生了改变
8.只用新的dom中的Input元素替换掉老dom中的Input元素

缺陷：性能的提升不明显

第三种方案
1.state数据
2.jsx模板
3.数据+模板结合，生成真实的dom，来显示

<div id = "abc"><span>helloword><span></div>

4.生成虚拟dom(js对象)(虚拟dom就是一个Js对象，用它来描述真实dom) (损耗了性能)

['div',{id:'abc'},['span'{},'helloword']]

5.state发生变化
6.生成新的虚拟dom（极大的提升性能）
提高性能：