react循环key值_React key值的作用和运用

在react项目中总会碰到如许一个的坑

这是正告数组遍历子元素要有一个唯一的key值，然则key究竟是什么，在代码中究竟起了什么作用？

key概述

react中的key属性，它是一个特别的属性，它的涌现不是给开辟者用的(比方你为一个组件设置key以后，也仍没法猎取这个组件的key值)，而是给react本身用的。

简朴来讲，react应用key来辨认组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每一个key对应一个组件，相同的key react以为是同一个组件，如许后续相同的key对应组件都不会被建立。

key的运用场景

在项目开辟中，key属性的运用场景最多的照样由数组动态建立的子组件的状况，需要为每一个子组件增加唯一的key属性值。那会有的人就会自然而然想到，key和动态衬着的子元素猎取的index位置的值很靠近，那不是能够直接用index附上key的值呢key={index}?

比方：

{dataList.map((item,index)=>{

return

{item.name}

})

}

在你尝试事后会发明，报错没了，衬着也没题目不是很正常嘛？！然则猛烈不引荐用数组index来作为key。

假如数据更新仅仅是数组从新排序或在个中间位置插进去新元素，那末视图元素都将从新衬着。

比方：

原本index=2的元素向前挪动后，那该元素的key不也一样发生了转变那如许会转变的Key就没有任何的存在意义，既然是作为“身份证”一样的存在，那就不容有失。固然，在你用key值建立子组件的时刻，若数组的内容只是作为纯展现，而不涉及到数组的动态变动，实际上是能够运用index作为key的。

key的值必需保证唯一且稳固

我在与Key值打过频频交道事后，以为key值就类似于数据库中的主键id一样，有且唯一。

//this.state.users内容。注重：李四和王五的id相同！！！

this.state = {

users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],

....//省略

}

render()

return(

用户列表

{this.state.users.map(u =>

{u.id}:{u.name}

)}

)

);

注重以上类型中，动态衬着的数据中，key以数据的id来定，而李四、王五的id相同而致使Key的相同，末了的衬着效果为张三和李四，王五并没有展现出来。重要是因为 react依据key以为李四和王五是同一个组件(李四和王五的key值相同)，致使第一个被衬着，后续的会被抛弃掉。

如许，有了key属性后，就能够与组件建立了一种对应关联，react依据key来决定是烧毁从新建立组件照样更新组件。

而且，Key也要保证值的稳固性，比方：

{dataList.map((item,index)=>{

return

{item.name}

})

}

特别如以上类型中所示，key的值以Math.random()随机天生而定，这使得数组元素中的每项都从新烧毁然后从新建立，有肯定的机能开支；别的能够致使一些意想不到的题目涌现。

所以，Key的值必需保证其唯一和稳固性