为什么在 React 中键很重要，它们如何提升性能？

Source: Dev.to

键为 React 的列表元素提供了稳定的标识，使得调和算法能够在渲染之间正确匹配元素。这可以最小化 DOM 更新，保留组件状态，并提升性能，尤其是在动态列表中。

键解决了什么问题？

React 使用一种 diff（调和）算法来比较 上一次的虚拟 DOM 与 下一次的虚拟 DOM。

没有键时，React：

• 通过列表中的索引来比较元素。
• 可能会误认为元素已经改变，即使它们没有改变，从而导致不必要的 DOM 替换。

有键时，React：

• 通过稳定的标识（键）来跟踪元素。
• 在可能的情况下复用已有的 DOM 节点，避免无谓的销毁和重新创建。

键如何提升性能？

• 防止不必要的 DOM 更新——DOM 操作代价高，键让 React 能跳过对未改变项的更新。
• 保留组件状态——没有键时，列表变化可能导致输入框失去焦点或值被清除；有键时，状态得以保留。
• 实现高效的重新排序——在拖拽列表、排序、过滤等场景中，React 可以移动已有节点，而不是销毁后重新创建。