diff

77 阅读1分钟

diff

  • 遍历新老数组,直到index对应的新老节点的key不同为止;
  • 遍历期间,根据 element 和 fiber 的 key,type 的比较,如果一致就可以复用fiber对象,并传入新的props;
  • 跳出循环后:
    • 如果老数组还未遍历完,而新数组遍历完了,那么就删除剩余的老节点;
    • 如果新数组还未遍历完,而老数组遍历完了,那么就创建新的fiber对象;
  • 如果都还存在未遍历的节点,老数组剩余的节点创建map,以key为键;
  • 遍历剩余的新数组的节点,复用相同key且type的节点;
  • 剩余的节点该删除的删除,该新建的新建;
// diff的性能问题:若新的index 在老的index 的左边,节点不做更改,在右会重新创建; 
// 例子: 1 2 3 -> 3 1 2  3就在老的3的左边,那么 1 2 节点都会重新创建;