成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React——diff算法

iliyaku / 517人閱讀

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

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

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

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

虛擬DOM

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

每當(dāng)虛擬DOM樹發(fā)生變化樹發(fā)生變化時(shí)，React會(huì)將當(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é)果并不是一個(gè)真實(shí)的DOM節(jié)點(diǎn)，而是一個(gè)輕量級(jí)的JavaScript對象，即虛擬DOM。

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

A Span

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

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

<p>A Paragraph</p>

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

分層比較

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

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

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

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

組件層面

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

組件被替換成了,這時(shí)前后節(jié)點(diǎn)樹不會(huì)進(jìn)行對比。React做出這樣的取舍是因?yàn)楹馁M(fèi)大量計(jì)算去匹配兩個(gè)幾乎不會(huì)相似的組件是一種浪費(fèi)。而事實(shí)上，大多數(shù)用戶會(huì)用大量的div去構(gòu)建一個(gè)節(jié)點(diǎn)樹，React在不會(huì)匹配不同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://systransis.cn/yun/78769.html

相關(guān)文章

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

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

    Scliang 評論0 收藏0

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

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

    HmyBmny 評論0 收藏0

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

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

    EasonTyler 評論0 收藏0

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

    摘要：的一個(gè)突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是研發(fā)團(tuán)隊(duì)弄出的虛擬機(jī)制以及其獨(dú)特的算法。在的算法下，在同一位置對比前后節(jié)點(diǎn)只要發(fā)現(xiàn)不同，就會(huì)刪除操作前的節(jié)點(diǎn)包括其子節(jié)點(diǎn)，替換為操作后的節(jié)點(diǎn)。 React的一個(gè)突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是facebook研發(fā)團(tuán)隊(duì)弄出的虛擬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)會(huì)被完全刪除掉，不會(huì)用于進(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元查看
<