数组重排时React的key属性是否仍能发挥作用？

当你给列表项设置了稳定且唯一的key（比如示例中的ID），React完全能智能识别出只需对现有<li>元素进行重排，不会重新构建这三个DOM项。

原因在于React的Diff算法对列表的处理逻辑：

• key的核心作用是作为每个列表元素的唯一身份标识，让React能在新旧列表之间精准匹配对应的元素。
• 当数组反转为[102, 101, 100]后，React对比新旧列表的key集合，发现所有key都已经存在于当前DOM中，只是顺序发生了变化。
• 这种情况下，React会跳过元素的销毁和重建步骤，直接对已有的DOM节点执行重排操作，以此匹配新的列表顺序。

举个直观的代码对比：
旧列表渲染：

<li key={100}>内容100</li>
<li key={101}>内容101</li>
<li key={102}>内容102</li>

反转后的新列表渲染：

<li key={102}>内容102</li>
<li key={101}>内容101</li>
<li key={100}>内容100</li>

React会通过key找到对应的DOM节点，直接调整它们在DOM树中的位置，不会触发这三个<li>的重新渲染。

反之，如果使用不稳定的key（比如数组索引），React就会因为无法匹配到正确的元素身份，可能执行不必要的DOM销毁和重建操作，影响性能。

内容的提问来源于stack exchange，提问作者whoisit