对比理解React中的虚拟DOM

对比理解React中的虚拟DOM

在 React 中实际上是 render 函数中return 的内容会生成 DOM，return 中的内容由两部分组成，一部分是 JSX ，另一部分就是 state 中的数据，所以简单来讲，在 React 中 JSX 结合 state 就生成了 DOM。

现在抛开虚拟 DOM 不谈，如果让我们去实现 React 中当数据发生变化时如何操作 DOM 来实现页面内容的变化，我们会怎样去实现？

第一种方案：

1. JSX + state 生成真实的 DOM，并显示在页面上
2. state 发生变化
3. 此时 JSX + state 再次结合生成新的真实的 DOM
4. 新的 DOM 直接替换掉原来的 DOM

这样页面会发生变化，但是生成真实的 DOM 和在页面上再重新加载新的 DOM 都比较耗性能。

第二种方案：

1. JSX + state 生成真实的 DOM，并显示在页面上
2. state 发生变化
3. 此时 JSX + state 再次结合生成新的真实的 DOM
4. 新的 DOM 和原始的 DOM 作对比，找出差异
5. 利用找出的差异，替换掉页面上原始 DOM 的相应部分

此时页面也会发生变化，和方案一相比多了对比步骤但是只需要替换掉原始DOM的一部分即可，综合来说，方案二要优于方案一。

第三种方案

1. JSX + state 生成真实的 DOM，并显示在页面上

2. 生成虚拟 DOM（虚拟 DOM 就是一个 JS 对象，用它来描述真实 DOM）

例如下面这段代码：

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

​ 生成的虚拟 DOM 为

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

​ 虚拟 DOM 的格式为

['标签名'，标签属性对象，子标签]

1. state 发生变化

2. JSX + state 生成新的虚拟 DOM
3. 两个虚拟 DOM 进行对比，找出差异

4. 根据差异直接修改替换页面上的 DOM

虚拟 DOM 是一个 JS 对象，生成一个虚拟 DOM 比生成一个真实的 DOM 结构要容易省时地多，而且两个虚拟 DOM（JS 对象） 之间的对比也比较简单，所以方案三最佳。

React 中使用的也是第三种方案的思想。