React 中的 key 与 diff 优化

在这篇文章中，我会简单讲讲关于 React 中的 key 与 diff 优化。

what

key 是 React 用于追踪列表中元素被修改、被添加或者被移除的辅助标识。

why

React 经过对列表中元素设置惟一 key ，对 virtual-dom 的 diff 过程进行算法优化。

how

在 React 的 diff 过程当中 React 会经过元素的 key 值来判断该元素是否已经存在？是否须要建立？是否须要移动位置？从而减小没必要要的元素渲染。

usage

• key 应该在数组内，且在兄弟元素之间是惟一标识，但不须要是全局惟一。
• 不推荐使用索引来做为 key ，由于 index 并非稳定不变的，在不一样的更新过程当中，下标可能不一样，因此当列表项顺序发生改变时，渲染将会较慢。
• key 只是给 React 内部使用，不会被传给组件。

best practise

使用列表元素的 id 做为键值。