React 源碼剖析系列 － 不可思議的 react diff
深入淺出React（四）：虛擬DOM Diff算法解析
React diff 算法
總結鏈接引用的文章
React出于性能的考慮，為了避免頻繁操作DOM，采用了虛擬DOM結構（virtual DOM）：
每當虛擬DOM樹發生變化樹發生變化時，React會將當前DOM樹和之前的虛擬DOM樹進行diff算法對比，得到虛擬DOM結構的區別，然后僅僅渲染差異部分。
ReactiveNative官方稱，不同類型的 component 是很少存在相似 DOM tree 的機會，因此這種極端因素很難在實現開發過程中造成重大影響的。

• 類型仙相同的節點總是生成同樣的樹，而類型不同的節點也總是生成不同的樹。
• 可以為多次render都表現穩定的節點設置key。

基于上述兩點，制定以下diff策略：

diff 策略

• 1.Web UI 中 DOM 節點跨層級的移動操作特別少，可以忽略不計。
• 2.擁有相同類的兩個組件將會生成相似的樹形結構，擁有不同類的兩個組件將會生成不同的樹形結構。
• 3.對于同一層級的一組子節點，它們可以通過唯一 id 進行區分。

算法優化

基于以上三個前提策略，React 分別對 tree diff、component diff 以及 element diff 進行算法優化，事實也證明這三個前提策略是合理且準確的，它保證了整體界面構建的性能。
React 通過制定大膽的 diff 策略，將 O(n3) 復雜度的問題轉換成 O(n) 復雜度的問題；

• React 通過分層求異的策略，對 tree diff 進行算法優化；
• React 通過相同類生成相似樹形結構，不同類生成不同樹形結構的策略，對 component diff 進行算法優化；
• React 通過設置唯一 key的策略，對 element diff 進行算法優化；

開發建議

建議，在開發組件時，保持穩定的 DOM 結構會有助于性能的提升；
建議，在開發過程中，盡量減少類似將最后一個節點移動到列表首部的操作，當節點數量過大或更新操作過于頻繁時，在一定程度上會影響 React 的渲染性能。

?

轉載于:https://www.cnblogs.com/yueyanglou/p/6287055.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的ReactiveNative学习之Diff算法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。