react入门系列之虚拟DOM

什么是虚拟DOM

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

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. hello,world
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
     item
   • 以上两行代码效果是一样的，都是创建了虚拟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值。