vlambda博客
学习文章列表

【ReactJS】 diff算法Part 2: React diff 启发式算法(heuristic algorithm)的假设

传统的diff算法计算一棵树变成另一棵树的复杂度有O(n^3),两棵树中的节点一一进行对比的复杂度为O(n^2),如果在比较过程中发现旧树上的一个点A在新树上没有找到,点A会被删掉, 留下的需要遍历新树上的所有点去找到一个可以填充它,最终复杂度为O(n^3)。

React在传统diff的基础上把问题转化成O(n)。站在传统diff的肩膀上,React删繁就简的策略是什么?官网上列了两个假设:
1. 两个不同类型的元素会产生不同的树
2. 开发者可以通过key prop来暗示哪些子元素在不同的渲染下能保持稳定

可以从下面的三个方面去理解上面的两条:
1. 在概括的比较树的时候,树是分层级的,跨层的变化少见就不考虑了,只比较同一层级的组件有木有发生改变。老diff算法遍历整个树,React对diff的一个重大改良是每次只比较同一层上的节点,如果有不一样的,老节点和老节点下的子树部分全被删掉。

2. 在具体到比较两个组件(Virtual DOM上的Component)时,如果组件类型变了,直接删掉整个旧的组件(包括旧组件下的别的组件),在同样的位置新建新的组件。

3. 对于同级别的组件来说要怎么处理,比如用map创建了许多同级组件,使用key如何使diff算法加速,这部分值得单独列出来解释

关于如何读React diff算法的源码部分,这个从reconcileChildren开始找起…

2021/01/16,周六,腊月初四


新浪微博:yuanzhu_pen

知乎:yuanzhupen

豆瓣:xujunhui