国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React——diff算法

iliyaku / 511人閱讀

摘要：組件層面節點算法只會在相同的組件類型上進行，意味著如果一個組件被替換成了這時前后節點樹不會進行對比。

這篇文章只是個人理解，有什么差異和謬誤還望大家指出：

原文：http://calendar.perfplanet.com/2013/diff/

不知道是從什么時候開始，寫JavaScript的時候，腦袋里面就會一直回響著一句話，盡量避免DOM操作，原因是DOM操作比較消耗性能，特別是在復雜的DOM結構中進行DOM操作。而當我們使用各種各樣前端模板引擎的時候，更是無法避免不停地操作DOM。

虛擬DOM

React出于性能的考慮，為了避免頻繁操作DOM，采用了虛擬DOM結構（virtual DOM）：

每當虛擬DOM樹發生變化樹發生變化時，React會將當前DOM樹和之前的虛擬DOM樹進行diff算法對比，得到虛擬DOM結構的區別，然后僅僅渲染差異部分。

    var MyComponent = React.createClass({ 
        render: function() {
            if (this.props.first) { 
                return 
A Span
; 
            } else { 
                return 
A Paragraph
; 
            }
        }
    });

這里MyComponent執行render方法的結果并不是一個真實的DOM節點，而是一個輕量級的JavaScript對象，即虛擬DOM。

如果我們先插入組件：；
React會創建真實DOM節點：

A Span

將之前的組件替換為：；
React會替換之前節點的屬性：className="first"為className="second"，同時替換子節點A Span為<p>A Paragraph</p>

最后移除組件；
React會移除節點

<p>A Paragraph</p>

如果將所有虛擬節點進行改變前后的diff算法比較，這同樣是一件消耗性能的過程（兩個樹的比較復雜度為O(n^3)），React采用了以下優化方案，將性能優化到O(n)。

分層比較

React將虛擬樹進行分層比較，這是因為節點操作很少存在跨層級的（比如將子節點移動到父節點外，變成父節點的兄弟節點），大多操作多是在兄弟節點之間的。如下圖中，比較只會在相同顏色的兄弟節點之間進行，一旦節點被刪除，則所有子節點都會被刪除，不會進行比較。

節點列表

假設有這樣的情況，一個組件初始化時渲染了5個子節點，第二個時鐘周期時向這5個子節點中間插入一個新的組件。這時，如果直接對比前后兩個子節點樹，新插入節點之后的所有子節點都會被重新渲染（C被替換為F，D被替換為C，E被替換為D），因為他們和之前的節點樹不匹配。如同下圖的情況：

React在組件插入的過程中，只會將同級子節點按前后順序排列起來，但是，如果給予每個子節點一個唯一的key值，這樣每個子節點都能找到與之對應的節點進行比較。

組件層面

節點diff算法只會在相同的組件類型上進行，意味著如果一個

組件被替換成了,這時前后節點樹不會進行對比。React做出這樣的取舍是因為耗費大量計算去匹配兩個幾乎不會相似的組件是一種浪費。而事實上，大多數用戶會用大量的div去構建一個節點樹，React在不會匹配不同class的組件。

參考文章： http://www.infoq.com/cn/articles/react-dom-diff?from=timeline&isappinstalled=0

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

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

相關文章

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

    摘要：并且處理特殊屬性，比如事件綁定。之后根據差異對象操作元素位置變動，刪除，添加等。當節點數過大或者頁面更新次數過多時，頁面卡頓的現象會比較明顯。基于注意使用來減少組件不必要的更新。 1、什么是Diff算法 傳統Diff：diff算法即差異查找算法；對于Html DOM結構即為tree的差異查找算法；而對于計算兩顆樹的差異時間復雜度為O（n^3）,顯然成本太高，React不可能采用這種...

    Scliang 評論0 收藏0

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

    摘要：并且處理特殊屬性，比如事件綁定。之后根據差異對象操作元素位置變動，刪除，添加等。當節點數過大或者頁面更新次數過多時，頁面卡頓的現象會比較明顯。基于注意使用來減少組件不必要的更新。 1、什么是Diff算法 傳統Diff：diff算法即差異查找算法；對于Html DOM結構即為tree的差異查找算法；而對于計算兩顆樹的差異時間復雜度為O（n^3）,顯然成本太高，React不可能采用這種...

    HmyBmny 評論0 收藏0

  • React diff原理探究以及應用實踐

    摘要：但是加了一定要比沒加的性能更高嗎我們再來看一個例子現在有一集合渲染成如下的樣子現在我們將這個集合的順序打亂變成。不加操作修改第個到第個節點的如果我們對這個集合進行增刪的操作改成。 拋磚引玉 React通過引入Virtual DOM的概念，極大地避免無效的Dom操作，已使我們的頁面的構建效率提到了極大的提升。但是如何高效地通過對比新舊Virtual DOM來找出真正的Dom變化之處同樣也...

    EasonTyler 評論0 收藏0

  • react虛擬dom機制與diff算法

    摘要：的一個突出特點是擁有極速地渲染性能。該功能依靠的就是研發團隊弄出的虛擬機制以及其獨特的算法。在的算法下，在同一位置對比前后節點只要發現不同，就會刪除操作前的節點包括其子節點，替換為操作后的節點。 React的一個突出特點是擁有極速地渲染性能。該功能依靠的就是facebook研發團隊弄出的虛擬dom機制以及其獨特的diff算法。下面簡單解釋一下react虛擬dom機制和diff算法的實現...

    jzman 評論0 收藏0

  • React 源碼剖析系列 － 不可思議的 react diff

    摘要：目前，前端領域中勢頭正盛，使用者眾多卻少有能夠深入剖析內部實現機制和原理。當發現節點已經不存在，則該節點及其子節點會被完全刪除掉，不會用于進一步的比較。 目前，前端領域中 React 勢頭正盛，使用者眾多卻少有能夠深入剖析內部實現機制和原理。本系列文章希望通過剖析 React 源碼，理解其內部的實現原理，知其然更要知其所以然。 React diff 作為 Virtual DOM 的加速...

    shuibo 評論0 收藏0

發表評論

0條評論

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