简单diff算法
- diff算法的目的就是以最小的性能开销,进行精准的更新
一、在没有考虑新旧子节点之间是的顺序是乱的情况下, 预设他们子节点顺序是一致的:
- 新子节点数量和旧子节点数量一样,只是节点内容不同,只需要一个一个子节点的Vnode比较即可
- 新子节点数量和旧子节点数量多,那么多的部分,就调用patch(null, newChildren[i], container)添加新的子节点
- 新子节点数量和旧子节点数量少,那么少的部分,就调用unmount(oldChildren[i])删除多的旧的子节点
二、通过type 和 key实现 可以进行新旧元素的精准复用;
-
如何移动:就是遍历新Vnode的子节点,找到与旧子节点一样可以复用的节点(用key来鉴别), 如果当前子节点,比之前节点索引值小,就说明要移动,移动到他上面节点真实Dom的下面.
-
如何添加:先遍历newChild中的某个元素, 和所有的oldChild节点挨个进行比较,查找可以相同的key,如果在oldChild中找不到,则说明是新增的, 然后添加在 前一个newChild节点的下面
-
如何删除:当DOM复用完成,并且新元素添加完成后,再遍历oldChild中某个元素, 和所有的newChild中的节点挨个进行比较;如果在newChild中找不到的,则说明是要删除的!