React列表项顺序变更（使用唯一Key）时的渲染机制探究

当你仅调整列表项的顺序、但所有项的key和内容都保持不变时，React的渲染逻辑会按以下流程处理：

1. 虚拟DOM对比：通过Key匹配对应节点 #

React在对比新旧虚拟DOM树时，会以key作为唯一标识来匹配列表项：

• 旧列表节点顺序：key=1abc（Green）→ key=2pqr（Blue）→ key=3xyz（Red）
• 新列表节点顺序：key=1abc（Green）→ key=3xyz（Red）→ key=2pqr（Blue）

React会直接识别出：key=3xyz和key=2pqr的节点只是位置发生了交换，既没有新增节点，也没有需要删除的节点。

2. DOM操作：移动已有节点而非销毁重建 #

由于对应的DOM节点已经存在（只是位置不符），React不会销毁这两个<li>节点再重新创建，而是直接在真实DOM中调整它们的位置——把原来第三个位置的<li>Red</li>移到第二个位置，把原来第二个位置的<li>Blue</li>移到第三个位置。

3. 元素/组件重渲染判断：无额外无效重渲染 #

对于示例中的<li>元素来说，它们的内容（item.name）没有变化，所以即使位置移动，React也不会触发这些元素的重渲染。如果这里是自定义组件，组件实例也不会被销毁重建，仅DOM位置发生变化，组件的useEffect（依赖项为空数组）、componentDidMount等生命周期钩子也不会重新触发。

这种处理方式正是React使用key的核心价值：避免不必要的DOM销毁重建，通过移动已有节点提升渲染性能，在长列表场景下效率提升会尤为明显。

内容的提问来源于stack exchange，提问作者A.G.Progm.Enthusiast