回答要有逻辑, 从 react 渲染设计思想, 面临的问题, diff 算法原理, 有哪些问题, 可能解决的办法 角度出发
浏览器性能瓶颈是 DOM, react 是采用虚拟 DOM 思想, 当需要重新渲染, 将新旧 DOM 数快照对比,找出变化的部分,尽可能较少 DOM 的变更, 而将一个树形结构转化成另一种树形结构, 通常算法复杂度是 On3 次方, 于是结合前端使用场景特征进行了算法优化
- 首选前端很少有节点跨层级移动
- 拥有相同类型的组件会生成相似的结构
- 对于同一层级节点, 他们可以通过唯一 ID 区分
首先会一层层比较, (通过 updateDepth 控制), 假如同层发现不同,销毁 结点及其下面所有结点, 哪怕其子节点是可复用的
然后同层级比较过程中, diff 提供了 插入/删除/移动三个操作, 而判断依据的唯一 ID 就是 标签类型, 或者组件的 key 属性. 通过唯一 key 可以判断新老集合中是否存在相同的节点, 如果存在相同节点, 会将新旧快照的索引进行对比, 新快照节点索引 > 旧快照节点索引，才需要进行移动操作。 脑补打扑克朝着一个方向码牌, 比如 J,K,Q, A -> J,Q,K,A 只需要把 K 移动到 Q 后面就成了一条龙了(我猜测他们的灵感就是来源扑克 hh)
但这个朝着一个方向的算法存在一个问题, 假如是把最后一个节点移动到第一个节点, 但会是把前面一些节点移动到 最后一个节点后面. 所以要避免这个场景
我猜测未来如果需要解决这个场景, 会增加双向 diff
