圖解updateChildren部分

初始的新舊 VNode 節點如下圖所示：

第一次迴圈後，找到了舊節點的末尾和新節點的開頭(都是 D)相同，於是直接複用 D 節點作為 diff 後建立的第一個真實節點。同時舊節點的 endIndex 移動到了 C，新節點的 startIndex 移動到了 C。

第二次迴圈後，同樣是舊節點的末尾和新節點的開頭(都是 C)相同，同理，diff 後建立了 C 的真實節點插入到第一次建立的 B 節點後面。同時舊節點的 endIndex 移動到了 B，新節點的 startIndex 移動到了 E。

第三次迴圈中，發現 patchVnode 的 4 種情形都不符合，於是在舊節點佇列中查詢當前的新節點 E，結果發現沒有找到，這時候只能直接建立新的真實節點 E，插入到第二次建立的 C 節點之後。同時新節點的 startIndex 移動到了 A。舊節點的 startIndex 和 endIndex 都保持不動。

第四次迴圈中，發現了新舊節點的開頭(都是 A)相同，於是 diff 後建立了 A 的真實節點，插入到前一次建立的 E 節點後面。同時舊節點的 startIndex 移動到了 B，新節點的 startIndex 移動到了 B。

第五次迴圈中，情形同第四次迴圈一樣，因此 diff 後建立了 B 真實節點 插入到前一次建立的 A 節點後面。同時舊節點的 startIndex 移動到了 C，新節點的 startIndex 移動到了 F。

--轉載來源

https://www.infoq.cn/article/udlcpkh4iqb0cr5wgy7f