DOM的diffing算法

一、简介

Vue和React渲染更新页面时，都是先在内存中生成虚拟DOM，然后进行新旧虚拟DOM的对比，最后转为页面的真实DOM渲染出来。

二、详解

准备数据

persons:[
	{id:1,name:'小张',age:18},
	{id:2,name:'小李',age:19},
]

需求，往数组中新增一个人员的信息

1、使用index（索引值）作为key

<li :key=index>{{personObj.name}}---{{personObj.age}}</li>

（1）往数组的前面添加

慢动作回放：

初始数据：
		{id:1,name:'小张',age:18},
		{id:2,name:'小李',age:19},
初始的虚拟DOM：
		<li key=0>小张---18<input type="text"/></li>
		<li key=1>小李---19<input type="text"/></li>

更新后的数据：
		{id:3,name:'小王',age:20},
		{id:1,name:'小张',age:18},
		{id:2,name:'小李',age:19},
更新数据后的虚拟DOM：
		<li key=0>小王---20<input type="text"/></li>
		<li key=1>小张---18<input type="text"/></li>
		<li key=2>小李---19<input type="text"/></li>

描述： 根据key值找到对应的节点进行对比，找到key为0的，发现里面的内容不一样，会递归查找，然后对比两个Input框，这两个input节点一样，就会把原来虚拟DOM所对应的真实DOM给新添加的数据用，由于两个input框的虚拟DOM一样，但是虚拟DOM最后会转为真实DOM放到页面中，真实DOM能往里输入东西，有.value值，就会残留原来的信息，所以会发生错乱，小张的信息就会放到小王后面，依次类推。
小结： 往数组前面添加数据，破坏了数组原有的结构，数据所对应的index发生了变化，把index作为key值进行新旧虚拟DOM的对比，如果没有输入类的DOM会出现效率上的问题，如果存在输入类的DOM，则会发生错乱的问题。
（2）往数组的后面添加
小结： 往数组后面添加数据，没有破坏数组原有的结构，不会影响页面的更新

2、使用id（数据的唯一标识）作为key

<li :key={{personObj.id}}>{{personObj.name}}---{{personObj.age}}</li>

慢动作回放----使用id唯一标识作为key
	初始数据：
			{id:1,name:'小张',age:18},
			{id:2,name:'小李',age:19},
	初始的虚拟DOM：
			<li key=1>小张---18<input type="text"/></li>
			<li key=2>小李---19<input type="text"/></li>
	更新后的数据：
			{id:3,name:'小王',age:20},
			{id:1,name:'小张',age:18},
			{id:2,name:'小李',age:19},
	更新数据后的虚拟DOM：
			<li key=3>小王---20<input type="text"/></li>
			<li key=1>小张---18<input type="text"/></li>
			<li key=2>小李---19<input type="text"/></li>

描述： 根据key值找到对应的节点进行对比，第一个key为3，发现之前没有这个节点，就会把这个虚拟DOM直接生成真实DOM，然后对比key为1和2的，发现里面的内容一样，就会把原来虚拟DOM所对应的真实DOM直接拿过来渲染，原来输入框中残留的信息也没有错乱。
小结： 不管是往数组前面还是后面添加数据，虽然破坏了数组原有的结构，数据所对应的index发生变化，但把id作为key值进行新旧虚拟DOM的对比，id所对应的原始数据不会发生错乱，所以不会影响页面的更新。

三、总结

1、虚拟DOM中key的作用：
1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
2). 详细的说: 当状态中的数据发生变化时，会根据【新数据】生成【新的虚拟DOM】,
随后进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

• 旧虚拟DOM中找到了与新虚拟DOM相同的key：
  (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
  (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
• 旧虚拟DOM中未找到与新虚拟DOM相同的key
  根据数据创建新的真实DOM，随后渲染到到页面

2、用index作为key可能会引发的问题：
（1）若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
（2）如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
（3）注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
3、开发中如何选择key?:
（1）最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
一般从后台拿到的数据都会有这个唯一标识的，如果数据是自己手动添加的，可以使用随机数或者日期对象等可以产生唯一值的东西作为key，还可以借助一些第三方工具比如nanoid等很多方法。
（2）如果确定只是简单的展示数据，用index也是可以的。