React key的了解

key 的问题

key 不能做下标 用唯一标识符
在 React ，组件每次更新时，会生成一个 虚拟DOM，和原有的虚拟DOM进行对比。
如果是批量生成的一组元素，那React就会根据 key 值去做对比

一个列表中的每一项 key 是唯一的
如果列表中发生顺序等操作变化，key 一定要用数据的id

代码演示

import React, { PureComponent, } from 'react';

// class Popwindows extends PureComponent {

// }


class App extends PureComponent {

    state = {
            data: [{
                    id: 0,
                    content: "第一条数据"
                },
                {
                    id: 1,
                    content: "第二条数据"
                },
                {
                    id: 2,
                    content: "第三条数据"
                },
                {
                    id: 3,
                    content: "第四条数据"
                },
            ]
        }
        //index跟新了
    render() {
        let { data } = this.state;
        return ( <
            div > {
                data.map((item, index) => {
                    return <
                        p key = { item.id } > { item.content } <
                        a onClick = {
                            () => {
                                data = data.filter(itemData => itemData !== item)

                                this.setState({
                                    data: [...data]
                                })
                            }
                        } > 删除 < /a> < /
                    p >
                })
            } <
            /div>
        )
    }

}

export default App;