React中的key

key 是什么？

是一个特殊属性，主要针对列表，map 后的 react 组件，以及相邻的同类型 DOM，需要手动指定 key，帮助 react 做区分

为什么要有 key？

1. React Diff 算法的需要。如果修改数组，没有指定 key 时，React 的 Diff 算法（优先通过 key 匹配），只能退化为按索引顺序对比。
2. 提升性能，比如说我在列表的开头新增了一个元素，如果不指定 key 的话，会让列表中原有的元素误以为内容发生了变化，导致整体重建（组件实例可能会被不必要的重新创建，、不仅仅是 UI 层更新，还会带来额外的性能开销，并可能引发子组件生命周期异常-子组件是PureComponent类型的可能不会更新）
3. 指定key能确保状态和正确元素绑定，是 React 识别和匹配"组件实例"的唯一标识，如果不指定 key，可能会发生数据错乱，以及重新渲染后导致的 Focus 丢失。比如有一个列表，map 后的数据有 输入框（带有默认值），一共有三项，如果你删除第二项，会发现此时第二项里面输入框里的默认值是之前删除的那一项里，输入框的默认值

最佳实践

1. 如果直接使用数组循环中的 index 除了消除控制台警告，并没有其他任何好处，应该使用稳定（在整个生命周期内）的且唯一的 key（不需要全局唯一，只需要在兄弟元素中唯一），比如用户 id
2. 如果数据没有 id，可以先生成稳定标识（比如哈希值），避免使用随机数或时间戳，会造成额外重建