React虚拟dom和diff算法

什么是虚拟dom？

这就要从react如何渲染出页面开始 一般状况下的步骤是这样

1. 获取state数据
2. JSX模板
3. state+JSX模板结合，生成真实dom并显示

这个是在state不发生变化的状况下，（state或者prop发生变化都会调用render函数，从新渲染页面）

state数据变化时，一般理解下应该是下面的步骤

1. 获取state数据
2. JSX模板
3. state数据+JSX模板结合，生成真实dom并显示
4. state数据发生变化
5. 新的state数据+JSX模板结合，生成真实dom并显示

这样能够实现，可是很是消耗性能，由于会渲染两次dom树，因此react就采用一种虚拟dom的方法来进行dom更新。

JSX转成dom流程

用JSX语法时，渲染dom的流程：JSX——JS dom描述对象——真实dom

具体步骤：

1. 获取state数据
2. JSX模板
3. 生成虚拟dom（虚拟dom就是一个JS对象，里面包含了对真实dom的描述

['div',{id:'a'},['span',{},'hello']]
复制代码

4. 用虚拟dom解构，生成真实dom并显示

<div id='a'><span>hello</span></div>
复制代码

5. state数据发生变化（好比hello变成了hi）
6. 生成新的虚拟dom

['div',{id:'a'},['span',{},'hi']]
复制代码

7. 比较原始虚拟dom和新的虚拟dom的区别，找出区别是span里的内容
8. 直接操做dom，只改变span里的内容

虚拟dom的好处

1. 性能提高，dom比对变成js对象比对
2. 使得跨端应用得以实现（react native）

在浏览器中能够用虚拟dom生成真实dom显示，在原生应用中也能够用虚拟dom生成对应的方式来显示页面

虚拟dom中的diff算法

在上面咱们介绍了react中state变化时，dom是如何发生变化的，在第七步中比较原始虚拟dom和新的虚拟dom的区别采用的方法，就是diff算法（diffrence）

虚拟dom在何时会发生比对？没错，数据发生变化时，也就是调用setState时

react的虚拟dom实际上是同级比较的

如上图 他的对比步骤以下

1. 红色原始虚拟dom和新的虚拟dom，没有变化，保持不变，往下继续比对
2. 蓝色原始虚拟dom和新的虚拟dom，没有变化，保持不变，往下继续比对
3. 绿色原始虚拟dom和新的虚拟dom，没有变化，保持不变，往下继续比对，浅蓝色原始虚拟dom和新的虚拟dom，没有变化，保持不变，往下继续比对

但凡在上面哪一步骤出现不一样，就再也不继续比对，而是删除下面的所有节点，采用新的虚拟dom(例如：若是红色框的原始虚拟dom和新的虚拟dom不一致，那么就不在进行比对，采用新的虚拟dom来生成dom)

key的做用

react利用key来识别组件，它是一种身份标识标识，来提升虚拟dom的比对速度看下面

好比我要在abcde中添加一个f

若是咱们没有key值，那咱们就须要A比对一遍，B对比一遍，以此类推很好性能，而有了key，就像下面的图同样，咱们很快就知道只有f与以前不一样，提升了列表渲染的性能