亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

virtual-dom內(nèi)對children進行比較的list-diff的詳解

WelliJhon / 2757人閱讀

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

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

list-diff的源代碼

前言：

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

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

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

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

我們傳入兩個數(shù)組 
oldList = [ A, B, C, D];
newList = [ E ,C, D, B];
第一步，兩個數(shù)組取交集，找到需要刪除的item 
var simulateList = [];
oldList.forEach((item, index) => {
    // 此item存在于newList內(nèi)
    if (newList.indexOf(item) !== -1) {
        simulateList.push(item)
    } else {
        moves.push({
            type: "remove",
            index: index
        })
    }
});

// 程序運行結(jié)束，此時simulateList 就是oldList與newList的交集，并且是按oldList的順序進行排序的
// 此時simulateList的值為[ B, C, D]
// 此時moves的值為[{type:"remove",index:0}],標識將下標為0的item從oldList內(nèi)刪除，即刪除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 已經(jīng)比較完了，則 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}
]

最終返回的數(shù)據(jù)如上所示，按照這個步驟，可以將oldList轉(zhuǎn)變?yōu)閚ewList,通常情況下對于list的改變主要集中在，刪除數(shù)據(jù)，或者新增數(shù)據(jù)，將list數(shù)據(jù)全部打亂的情況極少，所以以上算法基本滿足我們的需要。

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/98704.html

相關(guān)文章

  • React系列 --- virtualdom diff算法實現(xiàn)分析(三)

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

    sunsmell 評論0 收藏0

  • 淺析虛擬dom原理并實現(xiàn)

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

    charles_paul 評論0 收藏0

  • 如何實現(xiàn) virtual-dom

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

    rickchen 評論0 收藏0

  • 如何實現(xiàn)一個虛擬 DOM——virtual-dom 源碼分析

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

    qieangel2013 評論0 收藏0

發(fā)表評論

0條評論

WelliJhon

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<