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

你说的是对的，应该知道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 (
    <p>
        {List}
    </p>