四、列表和Keys
渲染列表数据是非常常见的场景,例如做一个展示用户的列表,需要根据获取的用户数据进行渲染列表。
class UserList extends Component {
constructor() {
this.state = {
userList:[
{
id: '23243',
info:{
name: 'sxww',
age: 26
}
},
{
id: '232434',
info:{
name: 'zzz',
age: 28
}
},
]
},
this,handleClick = this.handleClick.bind(this); //es6class中,必须手动绑定方法this的指向
}
handleClick(id) {
const userList = this.state.userList.map(item => {
const newItem = item.id === id ? {...item,vote: ++item.vote} : item;
return newItem;
})
this.setState({
userList
})
}
render() {
return (
<ul>
{
this.state.userList.map(item =>
<User info={item.info} handleClick={this.handleClick} />
)
}
</ul>
)
}
}
export default UserList;
运行后控制台报错:
应该为列表每一项添加key(一般使用列表数据的id作为key),React用Key标记每个元素,当数据变化时,React可以通过key知道哪些元素发生变化,从而只渲染发生变化的元素,提高渲染效率。
<User info={item.info} handleClick={this.handleClick} key={item.id}/>
不推荐使用索引作为key,因为一旦列表中的数据发生重排,数据的索引也会改变,不利于react渲染。列表元素的key不能重复,但只限于当前列表,不是全局唯一。