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 模板
3. 数据+模板 结合，生成虚拟的DOM（虚拟的DOM就是一个JS对象，用它来描述真实DOM）（损耗了性能）
   例：

['div',{id:'abc'},['span',{},'hello world']]

4. 用虚拟DOM的结构生成真实的DOM，来显示（渲染DOM）

<div id='abc'><span>hello world</span></div>

5. state 发生变化
6. 数据+模板 生成新的虚拟DOM （极大的提升了性能）

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

7. 比较原始的虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（Diff算法） （极大的提升了性能）
8. 直接操作DOM，改变span中的内容

优点：

1. 性能提升了。
2. 它使得跨端应用得以实现。React Native
   开发网页应用：将虚拟DOM转化成真实DOM，渲染DOM来展示页面
   开发原生应用：将虚拟DOM转化成原生应用里的组件，展示页面