React组件开发小记（一）—— 组件的key

    2017年年后，团队决定弃jQuery，将技术栈切到了React全家桶。笔者从业经验少，在技术切换的过程中，边学边用，踩过很多坑，曾经因为小问题将自己绕的晕晕乎乎的，也因此积累了一点经验。因此决定将过去六个月中遇到的问题，学到的经验以文章的形式记录下来。在接下来团队进一步扩大应用的过程中，仍然会继续记录。由于我本身就是新手，所以如果有看到的大神准备好了搬砖，请轻拍。

    先从React基础开始，不涉及Redux。文章会用几个小栗子来说明用到的知识点。项目会用Es6来写React组件，也会用到AntDesign。

（一）组件的key。

     先从一个常见的警告开始吧。

“ Warning:Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`. See https://fb.me/react-warning-keys for more information.”

    上面这个警告想必每个刚开始写React的童鞋遇到过。警告的意思是，你没有给React组件写一个叫“key”的属性值。这个报错通常出现在对后端返回的数组进行map遍历，然后生成一个个列表项。而React规范中，每一个组件都要有一个唯一的key值。
    解决这个问题也很好办，就是指定key。很多情况会直接使用map方法的第二个参数index作为组件的key。其实这是一种不推荐的写法。最好的key值是应该使用返回数据中的唯一标识来做组件的key（如果后端没有给你返回类似Id，key这种唯一标志性，当我没说）。
    为什么这么推荐？
    首先要明白，为什么组件要有唯一标识key值。React是根据组件上设定的key属性来生成该组件，只有key改变了，React才会更新组件，否则重用该组件。
     key相同，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。 key值不同，则react先销毁该组件，然后重新创建。如果使用了index作为key值，这个index并没有和返回的数据列表做一一对应，相当于是用了一个随机值，本来这一项数据没有改变，React组件可以被重用，但是用了随机值，组件会重新渲染。
    如果有两个组件有相同的key值，React则根据key认为两个组件是完全相同的，后一个组件会被抛弃掉。

    React的diff算法分为tree diff，component diff和element diff。在element diff中算法中，通过key进行算法优化。
    当节点处于同一层级时，React diff 有三种节点操作，分别为：插入、移动和 删除。
     如果没有key，假设老集合中包含节点：A、B、C，更新后的新集合中包含节点：B、C、A，此时新老集合进行对比，发现 B !== A，则创建B插入到集合，删除老集合 A；以此类推，创建并插入C、A，删除 B、C。
    节点很多的话，这样的操作会很消耗性能。更加合理的方式是进行移动操作。
  key存在，通过 key 发现新老集合中的节点都是相同的节点，只需要将老集合中节点的位置进行移动，更新为新集合中节点的位置。则可以把B和C移动到A的前面。
    唯一的key属性不会显性优化性能，但是对React内部是有利的。
  
    下一篇聊聊React的数据原则：谁持有，谁消费。