React中的diff算法的原理是什么？_react diff算法原理

一、diff算法是什么

实际上，dif 算法探讨的就是虚拟 DOM 树发生变化后，生成 DOM 树更新补丁的方式。它通过对比新旧两株虚拟 DOM 树的变更差异，将更新补丁作用于真实 DOM，以最小成本完成视图更新。

跟Vue一致，React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，使我们的页面的构建效率提到了极大的提升。
而diff算法就是更高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处

具体的流程如下：

• 真实的 DOM 首先会映射为虚拟 DOM:
• 当虚拟 DOM 发生变化后，就会根据差距计算生成 patch，这个 patch 是一个结构化的数据，内容包含了增加、更新、移除等:
• 根据 patch 去更新真实的 DOM，反馈到用户的界面上

diff算法主要基于三个规律？

• DOM 节点的跨层级移动的操作特别少，可以忽略不计
• 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构
• 对于同一层级的一组子节点，可以通过唯一的 id 进行区分

二、原理

diff算法可以总结为二个策略，分别从树、组件及元素三个层面进行复杂度的优化

react中diff算法主要遵循三个层级的策略：

• tree层级
• conponent 层级
• element 层级