react中组件的key属性

Question

这个key属性的含义是啥，当删除列表的某一项时，为啥总是删除的是最后一项的内容。听说更新前后react渲染会根据key值来决定怎么渲染，当一样时，不重新渲染，不一样时就重新渲染？感觉好像有点不太对。。。

Answer 1

React 实践心得：key 属性的原理和用法 —— 作者：叶斋

Answer 2

你说的是对的，应该知道React使用virtual dom来比较UI状态的变化，如果DOM中的某一节点更新时重新渲染，一样的话就不渲染。key属性的作用就在与解决渲染List的这种难题，简单来说，例如你有一个List：

<li>Orange</li> <li>Banana</li>

如果想更新成

<li>Apple</li> <li>Orange</li>

那dom比较算法就可以有多种选择，例如销毁两个，生成两个新的代替，或者销毁banana，在orange前插入apple等等，当list多的时候情况就比较复杂，所以React为了使得Dom比较算法最快，需要你提供给每一个list元素一个特殊的key，这样就容易比较前后两个大型的List了，帮助React如何移动、替代、销毁、插入节点，例如

let List = this.props.fruits.map((fruit) => {
            return <FruitList key={fruit.id}
                              name={fruit.name}
                    />
         });
 
return (
    <div>
        {List}
    </div>