标准答案
- React 不会对任意两棵树做最小编辑距离比较，而是使用启发式策略降低复杂度。
- 不同类型的元素通常会被认为是不同子树，旧节点会卸载，新节点会重新创建。
- 同类型 DOM 元素会比较属性变化，同类型组件会保留实例或状态并继续更新。
- 同级列表中，key 用来帮助 React 识别元素身份，判断复用、移动、插入或删除。
- key 不稳定会导致组件状态错位或大量不必要重建。
题目解析
这道题可以和 key 题联动回答。diff 策略依赖开发者提供稳定身份信息。
React 的比较重点是同层节点，不会跨层级任意寻找可复用节点。
理解 diff 有助于解释为什么组件类型不要在 render 内动态创建，为什么列表 key 不能乱用。
代码示例
下面的 key 让 React 能在列表排序后继续识别同一个用户项。
TSX
function UserList({ users }: { users: User[] }) {
return (
<ul>
{users.map(user => (
<UserRow key={user.id} user={user} />
))}
</ul>
)
}常见误区
- 认为 React 会自动计算最少 DOM 操作，不需要稳定 key。
- 动态列表用 index 或 Math.random 作为 key，导致状态错位或全量重建。
- 在组件函数内部定义子组件类型，导致每次渲染都是新的组件类型。