第九章 简单diff算法

60 阅读1分钟

简单diff算法

  • diff算法的目的就是以最小的性能开销,进行精准的更新

一、在没有考虑新旧子节点之间是的顺序是乱的情况下, 预设他们子节点顺序是一致的:

  1. 新子节点数量和旧子节点数量一样,只是节点内容不同,只需要一个一个子节点的Vnode比较即可
  2. 新子节点数量和旧子节点数量多,那么多的部分,就调用patch(null, newChildren[i], container)添加新的子节点
  3. 新子节点数量和旧子节点数量少,那么少的部分,就调用unmount(oldChildren[i])删除多的旧的子节点

二、通过type 和 key实现 可以进行新旧元素的精准复用;

  • 如何移动:就是遍历新Vnode的子节点,找到与旧子节点一样可以复用的节点(用key来鉴别), 如果当前子节点,比之前节点索引值小,就说明要移动,移动到他上面节点真实Dom的下面.

  • 如何添加:先遍历newChild中的某个元素, 和所有的oldChild节点挨个进行比较,查找可以相同的key,如果在oldChild中找不到,则说明是新增的, 然后添加在 前一个newChild节点的下面

  • 如何删除:当DOM复用完成,并且新元素添加完成后,再遍历oldChild中某个元素, 和所有的newChild中的节点挨个进行比较;如果在newChild中找不到的,则说明是要删除的!