React基础篇——四、列表和Keys

四、列表和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不能重复，但只限于当前列表，不是全局唯一。