React筆記-渲染列表Key(五)
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作為Key
使用item.name作為Key


浙公網安備 33010602011771號