React/Vue中的key有什么作用？为什么遍历列表时，key最好不要用index?

本文链接：https://blog.csdn.net/weixin_43334673/article/details/112795816

前端开发中，只要涉及到列表渲染，那么无论是Angular、React还是Vue框架，都会提示或要求每个列表项使用唯一的key，那很多开发者就会直接使用一个唯一的id或数组的index作为key的值，而并不知道使用key的原理。那么这篇博客就会讲解key的作用以及为什么最好不要使用index作为key的属性值。

文章目录

1.key的作用

key之所以那么重要，是因为React/Vue框架使用了虚拟DOM和Diff算法高效率的更新视图。

虚拟DOM中key的作用：(使用React来讲解，Vue同理)

				1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。

				2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 
											随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

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

								b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
											根据数据创建新的真实DOM，随后渲染到到页面

1.1举例说明

需求：

有一个页面需要展示人员的信息，同时有个“添加”按钮，可以给列表添加一个人员，注意：是往列表前面追加一个人，即新添加的人展示在前面。

代码：

class Person extends React.Component{
   
   

		state = {
   
   
			persons:[
				{
   
   id:1,name:'小张',age:18},
				{
   
   id:2,name:'小李',age:19},
			]
		}
		
		//触发“添加”按钮的回调函数
		add = ()=>{
   
   
			const {
   
   persons} = this.state
			const p = {
   
   id:persons.length+1,name:'小王',age:20<