談談React中Diff演算法的策略及實現

web ui 中 dom 節點跨層級的移動操作特別少，可以忽略不計。（tree diff）

擁有相同類的兩個元件將會生成相似的樹形結構，擁有不同類的兩個元件將會生成不同的樹形結（component diff）

對於同一層級的一組子節點，它們可以通過唯一 id 進行區分。（element diff）

1、 如果為更新文字型別，內容不同就直接更新替換，並不會呼叫複雜的diff演算法：

reactdomtextcomponent.prototype.receivecomponent(nexttext, transaction) }}

class tab extends component 

}shouldcomponentupdate() 
render() 
}

reactdomcomponent.prototype.receivecomponent = function(nextelement, transaction, context) 

reactdomcomponent.prototype.updatecomponent = function(transaction, prevelement, nextelement, context) 

_updatechildren: function(nextnestedchildrenelements, transaction, context) ;

var mountimages = ;
// 獲取新的子元素陣列
var nextchildren = this._reconcilerupdatechildren(
prevchildren,
nextnestedchildrenelements,
mountimages,
removednodes,
transaction,
context
);if (!nextchildren && !prevchildren) 
var updates = null;
var name;
var nextindex = 0;
var lastindex = 0;
var nextmountindex = 0;
var lastplacednode = null;
for (name in nextchildren) 
var prevchild = prevchildren && prevchildren[name];
var nextchild = nextchildren[name];
if (prevchild === nextchild) else 
// 新增新的子節點在指定的位置上
updates = enqueue(
updates,
this._mountchildatindex(
nextchild,
mountimages[nextmountindex],
lastplacednode,
nextindex,
transaction,
context));
nextmountindex++;
}// 更新nextindex
nextindex++;
lastplacednode = reactreconciler.gethostnode(nextchild);
}// 移除掉不存在的舊子節點，和舊子節點和新子節點不同的舊子節點
for (name in removednodes) }}

「積跬步、行千里」—— 持續更新中~，喜歡留下個讚哦！

react中Diff演算法的不同

1.傳統diff演算法 將所有節點遍歷，增刪減改 2.reactdiff演算法 分為三塊 1 比較虛擬dom和實際dom的同一層節點，忽略子節點 2 對比元件型別，如果一樣繼續比較dom節點，如果不同，直接替換整個元件節點 3 提供節點操作 同一層節點 插入 移動 刪除 附錄 傳統diff演算法 l...

React的Diff演算法

要掌握react的diff演算法我們必須先了解一下其渲染的機制 在每一次的狀態或者屬性更新的時候，react元件的render方法會進行渲染，返回乙個虛擬dom物件，這個就是react的渲染機制。但是這裡就有個問題，每次生成新的dom結構，也還是要轉化為真實的dom，還是會帶來大量的真實dom的操作...

React的diff演算法

react的diff演算法主要是兩個tree的比較。傳統的tree diff演算法複雜度是o n 3 react是演算法通過一些策略將複雜度將為o n 1.優化策略 1.網頁中的dom跨層級移動的特別少，可以忽略不計 2.相同型別的元件生成相似的樹形結構，不同型別的元件生成不同的樹形結構 3.同一層...