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

資訊專欄INFORMATION COLUMN

React——diff算法

iliyaku / 515人閱讀

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

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

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

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

虛擬DOM

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

每當(dāng)虛擬DOM樹發(fā)生變化樹發(fā)生變化時，React會將當(dāng)前DOM樹和之前的虛擬DOM樹進(jìn)行diff算法對比，得到虛擬DOM結(jié)構(gòu)的區(qū)別，然后僅僅渲染差異部分。

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

這里MyComponent執(zhí)行render方法的結(jié)果并不是一個真實(shí)的DOM節(jié)點(diǎn)，而是一個輕量級的JavaScript對象，即虛擬DOM。

如果我們先插入組件：；
React會創(chuàng)建真實(shí)DOM節(jié)點(diǎn)：

A Span

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

最后移除組件；
React會移除節(jié)點(diǎn)

<p>A Paragraph</p>

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

分層比較

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

節(jié)點(diǎn)列表

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

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

組件層面

節(jié)點(diǎn)diff算法只會在相同的組件類型上進(jìn)行，意味著如果一個

組件被替換成了,這時前后節(jié)點(diǎn)樹不會進(jìn)行對比。React做出這樣的取舍是因為耗費(fèi)大量計算去匹配兩個幾乎不會相似的組件是一種浪費(fèi)。而事實(shí)上，大多數(shù)用戶會用大量的div去構(gòu)建一個節(jié)點(diǎn)樹，React在不會匹配不同class的組件。

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78769.html

相關(guān)文章

  • 談?wù)?em>React中Diff算法的策略及實(shí)現(xiàn)

    摘要：并且處理特殊屬性，比如事件綁定。之后根據(jù)差異對象操作元素位置變動，刪除，添加等。當(dāng)節(jié)點(diǎn)數(shù)過大或者頁面更新次數(shù)過多時，頁面卡頓的現(xiàn)象會比較明顯?；谧⒁馐褂脕頊p少組件不必要的更新。 1、什么是Diff算法 傳統(tǒng)Diff：diff算法即差異查找算法；對于Html DOM結(jié)構(gòu)即為tree的差異查找算法；而對于計算兩顆樹的差異時間復(fù)雜度為O（n^3）,顯然成本太高，React不可能采用這種...

    Scliang 評論0 收藏0

  • 談?wù)?em>React中Diff算法的策略及實(shí)現(xiàn)

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

    HmyBmny 評論0 收藏0

  • React diff原理探究以及應(yīng)用實(shí)踐

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

    EasonTyler 評論0 收藏0

  • react虛擬dom機(jī)制與diff算法

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

    jzman 評論0 收藏0

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

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

    shuibo 評論0 收藏0

發(fā)表評論

0條評論

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