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;