关于key

• key 只是在兄弟节点之间必须唯一、稳定
• 元素的 key 只有放在就近的数组上下文中才有意义
• key 会传递信息给 React ，但不会传递给你的组件

为什么使用key ?

react相当于神奇的装修队，你给装修队一张图纸，然后说我希望房子装修成这样，然后装修队就会把房子装修成你想要的样子。如果第二次你修改了你的图纸重新装修，然后装修队就很聪明，可以根据第一次图纸和第二次图纸做比较，发现原来你并不想整个全部翻新，你只想把墙白色的换成绿色的，桌子从这个位置移到那个位置。发现差别之后只做差别的改变，这样装修的代价就非常的小。

virtual Dom相当于图纸，每次render的时候会产生不同的virtual Dom，react会比对不同的virtual Dom来看到底应该修改真正Dom的那些部分。

如下图一个A节点，被移动到B下面，如果逐行比较，发现A移动到B下面，需要O(n^3)的时间复杂度，是可以知道这个变化的。

但是react中，不愿意承担这个代价的，退而去其次，利用简化的diff方法，认为A被废弃掉了（unmount），然后在B下重新mount一个A。这当然多了unmont和mount的过程，好处保持时间复杂度在O(n)。

react的这样diff会有个问题，如下图当中间插入一个X，这时候react必须要我们开发人员帮他一把，因为react完全不知道A、B、C和X直接有什么关系，如果你不帮它一把的话，它基本会发现X和B不同删掉原来的B，然后创建一个新的X 放那，然后接着比发现B和C不同删掉原来的C，然后插入一个新的B，然后插入一个C。

我们知道这样明显是一种浪费，我们只是在A、B之间插入一个X，B、C都还在。这种动态产生的子组件就需要一个key的prop，来告诉react说其实我是插入一个新的东西。

当时三元表达式，不需要添加key可以。只有动态子组件才需要。如下p标签不需要添加key

总结：Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识