React学习笔记-渲染列表Key(五)
渲染列表需要添加key属性
import React from "react"
export default class LearnKey extends React.Component {
state = {
infos : [
{name : 'Bob', age : 18},
{name : 'kitty', age : 20},
{name : 'sam', age : 22}
]
}
addTom() {
this.setState({
infos : [
...this.state.infos,
{name : 'tom', age : 24}
]
}
)
}
del(index) {
this.state.infos.splice(index, 1);
this.setState({infos : this.state.infos});
}
render () {
return (
<div>
key可以用来追踪列表里的元素哪些被修改了 需要保证key的唯一性 同层key不能重复
<button onClick={() => this.addTom()}>添加 tom</button>
<div>{this.state.infos.map((item, index) => (
// 直接使用index作为key值 一旦修改某一项导致index变动 导致所有index变化的标签都会重新渲染(key改变组件会重新渲染)
<div key={index}>
{'name -->' + item.name + ', age -->' + item.age}
<button onClick={() => this.del(index)}>删除</button>
</div>
))}</div>
<button onClick={() => this.addTom()}>添加 tom</button>
<div>{this.state.infos.map((item, index) => (
// 使用item.name不会因为删除某一项而被改变 其他标签不会重新渲染
<div key={item.name}>
{'name -->' + item.name + ', age -->' + item.age}
<button onClick={() => this.del(index)}>删除</button>
</div>
))}</div>
</div>
)
}
}
标签:index,name,渲染,age,React,item,state,Key,infos From: https://www.cnblogs.com/SpicyPeper/p/17386280.html使用index作为Key
使用item.name作为Key