什么是diff算法
diff算法的设计之初就是为了节省性能,而diff算法和虚拟DOM的完美结合使得react称为了深受欢迎的前端开发框架之一。diff 是 different 的简写,这样一来,diff 算法是什么也就顾名思义了,就是找不同
普通diff和react diff的区别
最主要的就是算法的时间复杂度不同,普通的diff算法使用的是傻瓜式的循环递归对节点进行依次
的对比,使其算法的时间复杂度为O(n^3),而react diff通过对普通diff算法的优化,实现了时间复
杂度下降到O(n)的这样一个程度
react diff特点
同层比较,不存在跨层级
运作流程
主要分为3层:tree层、component层、element层
tree层:
tree层对DOM节点的跨层级移动的操作忽略不计,只对相同层级的DOM节点进行比较(即同一个
父节点下的所有子节点),一旦发现节点不存在,直接删除掉该节点以及之下的所有子节点。
component层:
component层是组件间的比较,有三种策略:
- 遇到同一类型的组件遵循 tree diff,进行层级对比
- 遇到不同类型的组件,直接将这个不同的组件判断为脏组件,并替换该组件和之下所有的子节点
- 在同一类型的两个组件中,当知道这个组件的虚拟dom没有任何变化,就可以手动使用shouldComponentUpdate()来判断组件是否需要进行diff,进一步的提升了diff效率和性能
注意:
避免使用结构相同但是类型不同的组件,由于类型不同的原因,diff会直接销毁该组件并重建,会
造成的性能浪费;
对于同一类型并且没有变化的组件,合理使用 shouldComponentUpdate() 进行优化
element层:
element层对同一层级的元素节点进行比较,有三种情况:
- 面对全新的节点时,执行插入操作
- 面对多余的节点时,执行删除操作
- 面对换位的节点时,执行移动操作
react中key值的作用
key值就是每个元素节点对应的唯一标识,要进行数据的更新,需要进行新旧虚拟dom的对比,就需要对比子元素的key值是否有匹配项,如果有则会进行数据的更新;如果没有就需要进行删除和重新创建
总结:
以上就是我对react diff算法的理解,希望对刚刚接触react的你有所帮助!