react学习历程14——理解list中key为啥不能使用index

在使用react写list组件的时候，必然需要写key，不写react直接报错，而之前我们一直使用的index做key，但react明确说了，不能使用index做key

先举一个例子说明一下

class DiffDemo extends React.Component {

    state = {
        students: [
            {id: 1, name: "哆啦A梦", age: 3},
            {id: 88, name: "静香", age: 5},
            {id: 3, name: "大雄", age: 6}
        ]
    }

    num = 100

    add = () => {
        this.num += 1
        const student = {id: `${this.num}`, name: `smallfish${this.num}`, age: 18};
        this.setState({students: [student, ...this.state.students]});
        //这个不是解决方案
        // this.setState({students: [...this.state.students, student]});
    }

    render() {
        return (
            <div>
                <h3>使用index做key</h3>
                <ul>
                    {
                        this.state.students.map((student, index) => {
                            return <li key={index}>{student.name}----{student.age}<input type="text"/></li>
                        })
                    }
                </ul>
                <h3>非index做key</h3>
                <ul>
                    {
                        this.state.students.map((student) => {
                            return (
                                <li key={student.id}>{student.name}----{student.age}
                                    <input type="text"/>
                                </li>
                            )
                        })
                    }
                </ul>
                <button onClick={this.add}>点我新增</button>
            </div>
        )
    }
}

这是一个简单的示例，如果你在输入框中输入内容，然后点击添加的话，你会发现数据错乱了。下面我们来具体分析一下：

当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，由于比较的最小维度是html标签，如果li下面还嵌套着其他标签，而这些标签变化无法把控，就会导致数据发生错乱。

解决方案就是根据数据中的唯一值去标识li，而非使用数组的索引值

本系列博客，都是本人学习react的心路历程，学到这里，应该就算是走出新手村了，先给自己打打气吧，加油