React中的diff算法

首先React不同于传统的diff算法,制定了三大策略,使得将时间复杂度O(n^3)转化为O(n)

tree diff优化:

对于DOM节点跨层级的移动操作少到忽略不计策略,提出tree diff优化,对DOM树进行分层对比,只会对比同一层次的节点。并且仅只有删除和创建两种操作。(为了保持良好的性能,尽量保持稳定的DOM结构,使用隐藏或显示,而不是真正的删除和添加)

component diff优化:

对于拥有相同类的两个组件将会生成相似的树形结构,拥有不同类型的两个组件将会生成不同的树形结构策略:提出component diff优化:即对于同一类型的组件,继续按照原策略进行比较虚拟DOM树,对于不同类型的组件,将不再往下比较而是整个删除,重新创建。(为了保证良好的性能,不同类型的component应当避免出现相似的DOM tree结构)

element diff优化:

对于同一层级的一组子节点,可以通过唯一id进行区分策略:提出了element diff策略:对于添加了key的同一层子节点(不能使用index),通过key对比新老DOM,如果有相同的存在的话,再判断时候需要移动位置(错位的节点只进行向后插入)。(因为为了保证性能,开发过程中尽量减少尾部数据向前调整位置的操作)

posted @ 2022-03-03 13:07  BONiii  阅读(128)  评论(0编辑  收藏  举报