react入门系列之虚拟DOM

### 什么是虚拟DOM

#### 数据变化页面同步渲染的逻辑，这里分析三种逻辑。

1. 先有数据 （state）

2. 模版（render中的jsx）

3. 数据 + 模版 = 生成真实Dom，来显示

4. state 发生改变

5. 数据 + 模版 = 生成真实Dom，替换原有的DOM

- 缺陷： 第一次生成真实dom，第二次又生成一个。最后替换。非常耗性能。

- 原因： 生成一个完整的dom，和替换一个完整的dom，非常耗性能。并不是每次数据变化dom的所有内容都要变。

1. 先有数据 （state）

2. 模版（render中的jsx）

3. 数据 + 模版 = 生成真实Dom，来显示

4. state 发生改变

5. 数据 + 模版 = 生成真实Dom，并不直接替换原始的DOM

6. 新旧DOM做对比，找差异。注意新的DOM其实是DoucumentFragment: 文档碎片并没有真实的挂载到页面上。

7. 找出input框发生变换

8. 只用新DOM中的input元素，替换掉老的DOM中的input元素。

- 缺陷： 节约了完整dom替换的性能，但是消耗了对比的性能。效果不明显。

1. 先有数据 （state）

2. 模版（render中的jsx）

3. 数据 + 模版 = 生成虚拟DOM（生成虚拟DOM是一个js对象，用它来描述真是DOM）（损耗性能非常小）

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

4. 用虚拟DOM的结构生成真实Dom，来显示

1. <div id='abc'><span>hello,world</span></div>

5. state 发生改变

6. 数据 + 模版 = 生成新的虚拟DOM（极大提升了性能）

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

7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容

8. 直接操作DOM改变span中的DOM

- 优势:

1. 减少了对真实DOM的创建，性能提高很大

2. js对象的比对非常不消耗性能的。

- 原因:

1. js去生产一个虚拟DOM其实就是一个js对象，而使用js去生成一个js对象是不怎么消耗性能的。

2. 对比上面两种方法，不仅减少了真实DOM的生产，同时也没有了真实DOM的对比，虚拟DOM对比也是非常节约新能的。

### 深入了解虚拟DOM

1. jsx --> createElement --> js对象（虚拟dom） --> 真实DOM

2. jsx实际上就是一个模版。

3. react将数据和jsx模版结合通过createElement方法生成js对象，也就是虚拟dom。

- React.createElement('div', {}, 'item') // {}为div属性

- return <div>item</div>

- 以上两行代码效果是一样的，都是创建了虚拟dom

4. 最后react再将虚拟dom生成真实dom

5. 虚拟dom带来的好处

1. 性能提升：真实dom的比对变成了js对象比对

2. 它使得跨端应用得以实现，React Native

- 虚拟dom是js对象，他可以同时在原生应用里面和浏览器中都能识别。真实dom是不能在原生应用识别的。

- 在原生应用中，我们可以使用虚拟dom转化成原生组件。这让我们能够开发原生应用。

### 虚拟dom中的diff算法

1. 算法运用在比较原始虚拟DOM和新的虚拟DOM的比对中

- 两个虚拟dom的比对就叫diffrence算法（react底层会用到），大大提高了比对效率

2. 什么时候会发生比对。

- 当你调用setState()的时候，就会发生比对。

- setState()是一个异步方法。

1. 为什么是一个异步呢。

2. 假设你调用了3次setState()方法。如果不是异步函数，是不是要进行3次虚拟dom比对呢？所以react将它设计成异步函数。

3. diff算法

- 同级比较

1. 从第一层虚拟DOM开始比较，如果差异，他就不再对比，他会将第一层以及该层对应的子节点都替换掉。

2. 这样比较确实会造成渲染的浪费，因为可能子节点会有相同的地方。

3. 优势在于比对算法简单，他可以大大减少比对的时间。

- 为什么在我们给dom的key值赋值时候，不要使用index？

1. 首先我们要知道，为什么我们在循环遍历DOM的时候要给DOM设置一个key值。

2. 每个DOM设置一个key，相当于给每个dom起了一个名字。在做虚拟dom对比的时候，我们只需要按名字对比，不需要通过dom内容现找到对应的dom再进行对比，这样就节省了新能。

3. 为什么不能用index呢？因为index不具备稳定性，当你删除某一个dom后，可能你整个dom树的key值都会发生变化。

4. 我们可以使用dom的内容去做key，因为内容改变本身dom就需要重新渲染。就拿todolist来说key可以绑定value值。

转载于:https://www.cnblogs.com/boye-1990/p/11382700.html