react 数据循环

上图中的列表我是通过数组的map循环进行展示的（图片本身的大小是不相同的，我通过等比例缩放调整所有的图片大小相等），但是是测试过程中发现当我删除一个li的时候后面的图片及信息会重新加载但是之前li中的样式却不会随着数据的改变而改变，经查阅发现：
循环过程每个li所设置的key值和数据库中的主键作用差不多，都是为了对数据进行唯一标识，一个key对应一个组件，当组件移动或者交换的时候，也就是数组动态变化，相同的key react认为是同一个组件所以不会被创建。我的key为数组的索引，当删除了某一个li之后只是数据发生了变化，之前的组件没有销毁然后创建新组建，把key值设为data.id就不会存在此问题了
key值的选择需要注意：1）key的值要稳定唯一，它是一个永久且唯一的值
2）不仅在数组生成组件上，其他地方也可以使用key，主要是react利用key来区分组件，相同的key表示同一个组件，react不会重新销毁创建组件实例，只可能更新；key不同，react会销毁已有的组件实例重新创建组件新的实例

图片的等比例缩放：
····
var img=$(ev.currentTarget),width1=img.width(),height1=img.height(); //图片
var imgdiv=img.parent(),width2=imgdiv.width(),height2=imgdiv.height(); //包裹图片的父元素
var rate1=width1/height1,rate2=width2/height2;

    var width=width2,height=height2;
    if(rate1>rate2){ //图片比外边框宽
        let imgW=width1*height/height1,imgL=-(imgW-width2)/2;
        img.css({
            width:imgW+"px",
            height:height+"px",
            position:"absolute",
            left:imgL+"px"
        })
    }
    else{
        let imgH=height1*width/width1,imgT=-(imgH-height2)/2;
        img.css({
            width:width+"px",
            height:imgH+"px",
            position:"absolute",
            top:imgT+"px"
        })
    }

··