react中Diff算法的不同

最新推荐文章于 2024-02-27 17:23:49 发布

禅心丶

最新推荐文章于 2024-02-27 17:23:49 发布

阅读量247

点赞数

分类专栏： React 算法文章标签： react 算法

本文链接：https://blog.csdn.net/weixin_41366733/article/details/80118667

版权

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

本文探讨了React中Diff算法的实现细节，将其分为三个主要部分：比较虚拟DOM与实际DOM的一层节点、组件类型的对比以及同一层节点的操作。通过传统Diff算法的示例，解释了如何处理节点的增删改查，包括对叶子节点的处理，以及在节点名或内容改变时的处理策略。

摘要由CSDN通过智能技术生成

 
 
传统Diff算法：将所有节点遍历，增删减改 

  2.reactDiff算法：分为三块 

  1> 比较虚拟DOM和实际DOM的同一层节点，忽略子节点 

  2> 对比组件类型，如果一样继续比较DOM节点，如果不同，直接替换整个组件节点 

  3> 提供节点操作（同一层节点）（插入、移动、删除） 

  附录：传统Diff算法： 

  let result = []; 

  // 比较叶子节点 

  const diffLeafs = function(beforeLeaf, afterLeaf) { 

  // 获取较大节点树的长度 

  let count = Math.max(beforeLeaf.children.length, afterLeaf.children.length); 

  // 循环遍历 

  for (let i = 0; i < count; i++) { 

  const beforeTag = beforeLeaf.children[i]; 

  const afterTag = afterLeaf.children[i]; 

  // 添加 afterTag 节点 

  if (beforeTag === undefined) { 

  result.push({type: "add", element: afterTag}); 

  // 删除 beforeTag 节点 

  } else if (afterTag === undefined) { 

  result.push({type: "remove", element: beforeTag}); 

  // 节点名改变时，删除 beforeTag 节点，添加 afterTag 节点 

  } else if (beforeTag.tagName !== afterTag.tagName) { 

  result.push({type: "remove", element: beforeTag}); 

  result.push({type: "add", element: afterTag}); 

  // 节点不变而内容改变时，改变节点 

  } else if (beforeTag.innerHTML !== afterTag.innerHTML) { 

  if (beforeTag.children.length === 0) { 

  result.push({ 

  type: "changed", 

  beforeElement: beforeTag, 

  afterElement: afterTag, 

  html: afterTag.innerHTML 

});

  } else { 

  // 递归比较 

  diffLeafs(beforeTag, afterTag); 

}

}

}

  return result; 

}

关注

专栏目录