ReactJS diff算法Part 2: React diff 启发式算法（heuristic algorithm）的假设

Posted 2021-03-30 许拖拖和李早早的技术交流中心

传统的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