面试官: 翻译翻译什么 TM 叫 react diff

回答要有逻辑, 从 react 渲染设计思想, 面临的问题, diff 算法原理, 有哪些问题, 可能解决的办法 角度出发

浏览器性能瓶颈是 DOM, react 是采用虚拟 DOM 思想, 当需要重新渲染, 将新旧 DOM 数快照对比,找出变化的部分,尽可能较少 DOM 的变更, 而将一个树形结构转化成另一种树形结构, 通常算法复杂度是 On3 次方, 于是结合前端使用场景特征进行了算法优化

1. 首选前端很少有节点跨层级移动
2. 拥有相同类型的组件会生成相似的结构
3. 对于同一层级节点, 他们可以通过唯一 ID 区分

首先会一层层比较, (通过 updateDepth 控制), 假如同层发现不同,销毁 结点及其下面所有结点, 哪怕其子节点是可复用的

然后同层级比较过程中, diff 提供了 插入/删除/移动三个操作, 而判断依据的唯一 ID 就是 标签类型, 或者组件的 key 属性. 通过唯一 key 可以判断新老集合中是否存在相同的节点, 如果存在相同节点, 会将新旧快照的索引进行对比, 新快照节点索引 > 旧快照节点索引，才需要进行移动操作。 脑补打扑克朝着一个方向码牌, 比如 J,K,Q, A -> J,Q,K,A 只需要把 K 移动到 Q 后面就成了一条龙了(我猜测他们的灵感就是来源扑克 hh)

但这个朝着一个方向的算法存在一个问题, 假如是把最后一个节点移动到第一个节点, 但会是把前面一些节点移动到 最后一个节点后面. 所以要避免这个场景

我猜测未来如果需要解决这个场景, 会增加双向 diff