首尾对比法的比较流程
-
在 oldVNode 和 newVNode 的分别设置头部和尾部指针。
-
在循环中,依次进行头-头,头-尾,尾-头,尾-尾的比较
- 如果匹配成功,将节点插入真实DOM中,且匹配的头部或尾部指针向内收缩。
- 如果匹配不成功,则继续下一步。
-
如果四次比较仍未匹配,则通过 key 去 oldVNode 中寻找对应的节点
- 找到对应节点,复用节点并插入真实DOM中。
- 未找到对应节点,创建新节点并插入真实DOM中。
-
当 oldVNode 或 newVNode 中头部指针超过尾部指针时,结束比较过程。
- 若 oldVNode 中剩余节点,直接删除节点。
- 若 newVNode 中剩余节点,新增节点并插入真实DOM中。