React核心之DOM

真实DOM与虚拟DOM：

• 创建一个真实的DOM底层需要调用一个application级别的API；
• 创建虚拟DOM就是生成一个JS对象，很简单。

第一版：

1. state 数据
2. JXC 模板
3. 数据+模板 结合，生成真实的DOM，来显示
4. state 发生改变
5. 数据+模板 结合，生成真实的DOM，替换原始的DOM

缺陷：

1. 第一次生成了一个完整的DOM片段
2. 第二次生成了一个完整的DOM片段
3. 第二次的DOM替换第一次的DOM，非常耗性能

第二版：

1. state 数据
2. JXC 模板
3. 数据+模板 结合，生成真实的DOM，来显示
4. state 发生改变
5. 数据+模板 结合，生成真实的DOM，并不直接替换原始的DOM
6. 新的DOM（DocumentFragment）和原始的DOM做比对，找差异
7. 比如：找出input框发生变化，
8. 只用新的DOM中的input元素，替换掉老的DOM中的input元素

缺陷：
性能的提升并不明显

第三版：

1. state 数据
2. JXC 模板