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 作为键值。