前端与全栈开发面试 · 第 47 题

1. 通用的树 diff 算法复杂度是 O(n³),React 基于两个假设把它降到 O(n)。
2. 假设一:不同类型的元素会产生不同的树。元素类型变了(比如 div 变成 span,或者换了一个组件)就直接销毁整棵子树再重建,不再继续比较内部。
3. 假设二:同一层级的子元素可以通过 key 来标识是不是同一个元素。只做同层比较,不跨层级移动节点。
4. 同类型的 DOM 元素只更新变化的属性;同类型的组件保留实例和状态,用新的 props 重新渲染。
5. 列表 diff:根据 key 匹配新旧子节点,能复用的就移动,多出来的新增,缺少的删除。没有 key 或用下标作 key 时,只能按位置比较,插入或重排会造成不必要的更新,甚至状态错位。
6. 实践:key 要稳定、唯一(通常用数据 ID);想强制重置一个组件的状态,可以主动更换它的 key。

两个假设加上 key 的作用,能提到「换 key 重置状态」的技巧更好。