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…