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值。