React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？

问题描述

1. 这里的n指的是页面的VDOM节点数，这个不太严谨。若是更严谨一点，咱们应该应该假设 变化以前的节点数为m，变化以后的节点数为n。

2. React 和 Vue 作优化的前提是“放弃了最优解“，本质上是一种权衡，有利有弊。

假若这个算法用到别的行业，好比医药行业，确定是不行的，为何？

React 和 Vue 作的假设是：

• 检测VDOM的变化只发生在同一层
• 检测VDOM的变化依赖于用户指定的key

若是变化发生在不一样层或者一样的元素用户指定了不一样的key或者不一样元素用户指定一样的key， React 和 Vue都不会检测到，就会发生莫名其妙的问题。

可是React 认为， 前端碰到上面的第一种状况几率很小，第二种状况又能够经过提示用户，让用户去解决，所以 这个取舍是值得的。 没有牺牲空间复杂度，却换来了在大多数状况下时间上的巨大提高。 明智的选择！

基本概念

首先你们要有个基本概念。

其实这是一个典型的最小编辑距离的问题，相关算法有不少，好比Git中 ，提交以前会进行一次对象的diff操做，就是用的这个最小距离编辑算法。

leetcode 有原题目, 若是想明白这个O(n^3)， 能够先看下这个。

对于树，咱们也是同样的，咱们定义三种操做，用来将一棵树转化为另一棵树：

• 删除 删除一个节点，将它的children交给它的父节点

• 插入 在children中 插入一个节点

• 修改 修改节点的值

事实上，从一棵树转化为另一棵树，咱们有不少方式，咱们要找到最少的。

直观的方式是用动态规划，经过这种记忆化搜索减小时间复杂度。

算法

因为树是一种递归的数据结构，所以最简单的树的比较算法是递归处理。

详细描述这个算法能够写一篇很长的论文，这里不赘述。 你们想看代码的，这里有一份 我但愿没有吓到你。

确切地说，树的最小距离编辑算法的时间复杂度是O(n^2m(1+logmn)), 咱们假设m 等于 n， 就变成 O(n^3)。

题外话

你们若是对数据结构和算法感兴趣，能够关注下个人[leetcode题解](github.com/azl39798585…