每日一篇系列--Vue跟React中，遍历列表时所添加的key的作用

今日份笔记~
题目传送门：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1

---

Key的应用

因为日常开发中以Vue为主，所以本文以Vue为例。
在Vue开发过程中，使用v-for遍历生成列表是很常规的操作，在生成列表的时候，通常会给每一个列表项添加一个key属性：
例如：

<template>
	<div v-for="item in list" :key="item">
		{{item}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [1, 2, 3, 4, 5]
			}
		}
	}
</script>

这个是生成多个div的简单示例，例子中每一项div都有一个key属性。
如上例所示，v-for执行完成之后，会生成一个dom数组，我们先给数组的每一项打上一个ID，如下：

[
	'<div>1</div>',  // ID: A
	'<div>2</div>' , // ID: B
	'<div>3</div>' , // ID: C
	'<div>4</div>' , // ID: D
	'<div>5</div>'  // ID: E
]

此时，如果我们对list数组做出改变，调整list数组每一项的位置，DOM数组也会发生变化，变化如下：

// 调整list数组的内容
this.list = [2, 3, 5, 1, 4]

// 添加了key属性，DOM数组渲染如下
[
	'<div>2</div>',  // ID: B
	'<div>3</div>' , // ID: C
	'<div>5</div>' , // ID: E
	'<div>1</div>' , // ID: A
	'<div>4</div>'  // ID: D
]

而如果不给每项div添加key属性，DOM数组就会变成如下这样：

// 没有添加key属性，DOM数组渲染如下
[
	'<div>2</div>',  // ID: A
	'<div>3</div>' , // ID: B
	'<div>5</div>' , // ID: C
	'<div>1</div>' , // ID: D
	'<div>4</div>'  // ID: E
]

通过对比ID，我们不难发现：
在给每一项添加key属性之后，DOM的位置发生了变化，而对应DOM中的值没有变化；
没有给每一项添加key属性的时候，DOM的位置没有变化，但是DOM中的内容更新了。（就地复用）

那如果我们对原数组进行增删操作呢？结果如下：

// 修改原数组
this.list = [3, 4, 5, 6, 7]

// 添加key的渲染结果如下
[
	'<div>3</div>',  // ID: C
	'<div>4</div>' , // ID: D
	'<div>5</div>' , // ID: E
	'<div>6</div>' , // ID: F
	'<div>7</div>'  // ID: G
]

// 未添加key的渲染结果如下
[
	'<div>3</div>',  // ID: A
	'<div>4</div>' , // ID: B
	'<div>5</div>' , // ID: C
	'<div>6</div>' , // ID: D
	'<div>7</div>'  // ID: E
]

通过对比我们可以发现：
添加key之后，增删数组后，引发了DOM节点的增删，其中A/B节点被删除，F/G节点被添加；
而没有添加key的时候，依然只是修改了DOM中的内容，原地复用了DOM

在对数组进行增删改的操作之后，我们发现渲染的结果其实是一样的，表面上看好像没什么问题，而且在对简单的模板进行渲染时，不加key的diff的速度也比加key的快，因为节点的增删会有时间损耗，这个就是官方文档所说的简单模式。可是不添加key会有什么后遗症呢？主要有以下几点：
1、过渡效果会不起作用；
2、某些节点有绑定数据（表单）状态，会引发状态错位
关于这种情况，官网也有给出解释：这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

---

Key的作用

那key的作用是什么呢？大佬做出了一个比较容易理解的总结：
key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。

为什么更准确？
因为在Vue的diff算法中，通过对两个节点的key值对比，可以比较出这两个节点是否是同一个节点，避免了就地复用的情况，所以更加准确。
在日常开发中还存在一种情况，有的前端同学（比如我。。囧RZ）在使用v-for遍历生成节点的时候，喜欢做这样的事情，使用index索引值作为每一项的key：

<div v-for="(item, index) in list" :key="index">
	{{item}}
</div>

这样的写法依旧会导致就地复用的问题，因为数组的值改变了之后，数组的索引并没有受到影响，从始至终都是0,1,2,3…所以在diff算法中，这两者依旧是算同一个节点，key加跟没加是一样的（摊手）。所以需要注意key值需要选用一个可以唯一标识当前节点的值，就像节点的ID属性。

为什么更快？
利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。

---

总结

1、添加key值与否，对于渲染结果没有什么影响，但是不添加会导致无法触发过渡，状态错位等后遗症；
2、key值需要选取可以唯一标识节点的值;
3、在简单模式下，即不依赖组件状态的条件下，不加key值可以提升diff速度，而在复杂模式下，添加key则是更好的选择；
4、key的作用是：给每一个vnode添加唯一的id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。