virtual-dom內對children進行比較的list-diff的詳解

WelliJhon 發布于2019-08-23 12:32 / 2703人閱讀

摘要：不清楚的可以查看此文章的源代碼前言在或者內，每一個都有一個唯一來標識，通常是框架自動處理，但是在循環內必須由開發者指定。所以以下解讀我就是用這個來代表內的對象。

不清楚virtual-dom的可以查看此文章

list-diff的源代碼

前言：

在vue或者react內，每一個VNode都有一個唯一key來標識，通常是框架自動處理，但是在循環內必須由開發者指定。所以以下解讀我就是用這個key來代表list內的對象。

我們并不需要真的達到最小的操作，我們只需要優化一些比較常見的移動情況，犧牲一定DOM操作，讓算法時間復雜度達到線性的（O(max(M, N))

方法入口

let diff = (oldList, newList) => {
    let moves = [];
    // 邏輯處理
    return moves;
}

由上可以看出，diff函數返回的是將舊數組轉換成新數組的步驟
下面我會詳細說明中間的邏輯處理步驟

我們傳入兩個數組

oldList = [ A, B, C, D];
newList = [ E ,C, D, B];

第一步，兩個數組取交集，找到需要刪除的item

var simulateList = [];
oldList.forEach((item, index) => {
    // 此item存在于newList內
    if (newList.indexOf(item) !== -1) {
        simulateList.push(item)
    } else {
        moves.push({
            type: "remove",
            index: index
        })
    }
});

// 程序運行結束，此時simulateList 就是oldList與newList的交集，并且是按oldList的順序進行排序的
// 此時simulateList的值為[ B, C, D]
// 此時moves的值為[{type:"remove",index:0}],標識將下標為0的item從oldList內刪除，即刪除A

第二步，同步遍歷newList和simulateList

newList = [E,C,D,B];
simulateList= [B,C,D];

// i與j分別是newList與simulateList的下標

// newList E 與 simulateList B 比較，E 不等于 B 且 E 不存在于simulateList中，則insert E 
// 此時i=0;j=0;
moves = [
    {type:"remove",index:0},
    {type:"insert",index:0,item:E}
];
i++;

// newList C 與 simulateList B 比較，C 不等于 B 且 simulateList B 的下一個為 C，則remove B
// i=1;j=0;

moves = [
    {type:"remove",index:0},
    {type:"insert",index:0,item:E},
    {type:"remove",index:1}
]
i++;
j++;


// 4. newList D 與 simulateList D 比較，相等則進入下一步比較
i++;
j++;

// 5. newList B，此時simulateList 已經比較完了，則 insert B
// i=3;j=2;

moves = [
    {type:"remove",index:0},
    {type:"insert",index:0,item:E},
    {type:"remove",index:1},
    {type:"inser", item: B, index: 3}
]

最終返回的數據如上所示，按照這個步驟，可以將oldList轉變為newList,通常情況下對于list的改變主要集中在，刪除數據，或者新增數據，將list數據全部打亂的情況極少，所以以上算法基本滿足我們的需要。

由上可以看出唯一key的重要性，在用vue或者react寫list的時候，務必要使用唯一的固定值作為可以，杜絕用數組下標作為key的寫法。

第一次寫文章，不足之處還請海涵

云服務器 GPU云服務器你的賬號無法進行指令的交互詳解安裝目錄的詳解小程序的開發如何進行

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98704.html

React系列 --- virtualdom diff算法實現分析(三)

摘要：所以只針對同層級節點做比較，將復雜度的問題轉換成復雜度的問題。 React系列 React系列 --- 簡單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)React系列 --- virtualdom diff算法實現分析(三)React系列 --- 從Mixin到HOC再到HOOKS(四)React系列 --- createElement, ReactElem...

sunsmell 2019-08-26 10:37 評論0 收藏0
淺析虛擬dom原理并實現

摘要：虛擬原理流程簡單概括有三點用模擬樹，并渲染這個樹比較新老樹，得到比較的差異對象把差異對象應用到渲染的樹。下面是流程圖下面我們用代碼一步步去實現一個流程圖用模擬樹并渲染到頁面上其實虛擬，就是用對象結構的一種映射，下面我們一步步實現這個過程。背景大家都知道，在網頁中瀏覽器資源開銷最大便是DOM節點了，DOM很慢并且非常龐大，網頁性能問題大多數都是有JavaScript修改DOM所引起的...

charles_paul 2019-08-23 12:18 評論0 收藏0
如何實現 virtual-dom

摘要：但是實際開發中，整個文檔樹中和標簽基本不會有太大的改動。在測試中，不難發現其實已經很快了，但是速度會比較慢，所以這里留下了一個待優化的點就是。如何實現 virtual-dom 0. 什么是 vnode 相信大部分前端同學之前早已無數次聽過或了解過 vnode（虛擬節點），那么什么是 vnode? vnode 應該是什么樣的？如果不使用前端框架，我們可能會寫出這樣的頁面： ...

rickchen 2019-08-23 14:06 評論0 收藏0
如何實現一個虛擬 DOM——virtual-dom 源碼分析

摘要：具體代碼如下，，下面，我們來簡單介紹下這個排序算法檢查和中的是否擁有字段，如果沒有，直接返回的數組。通過上面這個排序算法，我們可以得到一個新的的數組。概述本文通過對virtual-dom的源碼進行閱讀和分析，針對Virtual DOM的結構和相關的Diff算法進行講解，讓讀者能夠對整個數據結構以及相關的Diff算法有一定的了解。 Virtual DOM中Diff算法得到的結果如何映...

qieangel2013 2019-08-26 13:37 評論0 收藏0