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

資訊專欄INFORMATION COLUMN

簡(jiǎn)述dom diff原理

isLishude / 1087人閱讀

摘要：但是我一直信奉一個(gè)原則，即但凡復(fù)雜的知識(shí)，理解之后都只需要記憶簡(jiǎn)單的東西，而想簡(jiǎn)單精確描述一個(gè)復(fù)雜知識(shí)，是極困難的事。兩個(gè)相同的節(jié)點(diǎn)，虛擬會(huì)認(rèn)為是同一個(gè)節(jié)點(diǎn)，從而對(duì)其進(jìn)行比較。

前言：

關(guān)于react的虛擬dom以及每次渲染更新的dom diff，網(wǎng)上文章很多。但是我一直信奉一個(gè)原則，即：但凡復(fù)雜的知識(shí)，理解之后都只需要記憶簡(jiǎn)單的東西，而想簡(jiǎn)單、精確描述一個(gè)復(fù)雜知識(shí)，是極困難的事。

正文

dom diff是什么？
1.從根節(jié)點(diǎn)開始遍歷所有節(jié)點(diǎn)；
2.對(duì)于不同類型的標(biāo)簽，刪除原標(biāo)簽，新建標(biāo)簽；
3.對(duì)于類型相同、屬性不同的標(biāo)簽，只修改屬性；
4.對(duì)于同一個(gè)父節(jié)點(diǎn)下的復(fù)數(shù)同類型標(biāo)簽（即列表類型），基于key對(duì)比、修改。

解析 關(guān)于1：

-遍歷用的是前序遍歷（先序遍歷）

關(guān)于2：

-不同類型的標(biāo)簽是指：比如div和span就是不同類型的標(biāo)簽
-如果同一個(gè)位置的標(biāo)簽類型改變（依然以div和span為例），那么直接刪除div標(biāo)簽，新建一個(gè)span標(biāo)簽，重新渲染。原本的div標(biāo)簽里的一切都跟新的span標(biāo)簽沒(méi)有關(guān)系
-對(duì)于自定義的組件比如

、之類的也適用
-標(biāo)簽位置只相對(duì)于父節(jié)點(diǎn)有意義。假設(shè)原本A節(jié)點(diǎn)的父節(jié)點(diǎn)是B，更新后A節(jié)點(diǎn)的父節(jié)點(diǎn)是C，那么對(duì)于dom diff來(lái)說(shuō)，原本的A節(jié)點(diǎn)會(huì)被銷毀，在C節(jié)點(diǎn)下的A節(jié)點(diǎn)是一個(gè)新的節(jié)點(diǎn)，跟原本的A節(jié)點(diǎn)沒(méi)有關(guān)系

關(guān)于3：

-這一個(gè)比較好理解，對(duì)于僅僅屬性不同的標(biāo)簽，修改屬性即可

關(guān)于4

-假設(shè)一個(gè)div下有五個(gè)span節(jié)點(diǎn)，此時(shí)我們要插入一個(gè)節(jié)點(diǎn)


虛擬dom并不知道插入后是ABFCDE，而會(huì)認(rèn)為除了AB以外的節(jié)點(diǎn)都改變了
所以對(duì)于虛擬dom來(lái)說(shuō)此時(shí)是ABGHIJ，付出了額外的消耗。
于是react引入了key的概念。兩個(gè)key相同的節(jié)點(diǎn)，虛擬dom會(huì)認(rèn)為是同一個(gè)節(jié)點(diǎn)，從而對(duì)其進(jìn)行比較。引入了key之后，react就知道節(jié)點(diǎn)是ABFCDE了。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103628.html

相關(guān)文章

  • 前端面試分享: 兩年經(jīng)驗(yàn)社招-阿里巴巴

    摘要：作者兩年經(jīng)驗(yàn)第一家任職的是個(gè)小公司第二家算是二線互聯(lián)網(wǎng)公司各待了一年吧能有機(jī)會(huì)去阿里面試很驚喜先來(lái)和大家分享一下面試經(jīng)歷電話面試初探因?yàn)檫€在職的緣故電話面試從晚上點(diǎn)鐘開始持續(xù)了半個(gè)小時(shí)左右一開始的時(shí)候特比緊張甚至聲音略有些顫抖簡(jiǎn)單自我介紹做 作者兩年經(jīng)驗(yàn), 第一家任職的是個(gè)小公司, 第二家算是二線互聯(lián)網(wǎng)公司, 各待了一年吧... 能有機(jī)會(huì)去阿里面試很驚喜! 先來(lái)和大家分享一下面試經(jīng)歷....

    JowayYoung 評(píng)論0 收藏0

  • vue總結(jié)

    摘要：用創(chuàng)建好的實(shí)例調(diào)用守衛(wèi)中傳給的回調(diào)函數(shù)。注冊(cè)一個(gè)全局守衛(wèi)。這和類似，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用僅代表個(gè)人見(jiàn)解，能力有限，如有錯(cuò)誤會(huì)誤人子弟的地方歡迎留言指出謝謝 原文地址 vue(前端框架)解決了什么問(wèn)題？ 現(xiàn)在的前端頁(yè)面元素越來(lái)越多，結(jié)構(gòu)也變得越來(lái)越復(fù)雜,當(dāng)數(shù)據(jù)和視圖混合在一起的時(shí)候?qū)λ鼈兊奶幚頃?huì)十分復(fù)雜，同時(shí)也很容易出現(xiàn)錯(cuò)...

    Youngs 評(píng)論0 收藏0

  • 常見(jiàn)react面試題匯總（適合中級(jí)前端）

    摘要：但在中會(huì)有些不同，包含表單元素的組件將會(huì)在中追蹤輸入的值，并且每次調(diào)用回調(diào)函數(shù)時(shí)，如會(huì)更新，重新渲染組件。在構(gòu)造函數(shù)中調(diào)用的目的是什么在被調(diào)用之前，子類是不能使用的，在中，子類必須在中調(diào)用。將使用單個(gè)事件監(jiān)聽器監(jiān)聽頂層的所有事件。 已經(jīng)開源 地址：https://github.com/nanhupatar...關(guān)注我們團(tuán)隊(duì)：showImg(https://segmentfault.co...

    leone 評(píng)論0 收藏0

  • 記2019前端面經(jīng)

    摘要：寒冬來(lái)臨，卷入動(dòng)蕩之中只能又開啟了漫漫求職路。前前后后面試了家公司，總結(jié)一下問(wèn)題做一個(gè)。這半年來(lái)因?yàn)榉N種原因?qū)夹g(shù)上有些許的松懈和怠慢，所幸還能拿到了自己很滿意的，未來(lái)的路還要更加努力的走 Motivation 2019寒冬來(lái)臨，卷入動(dòng)蕩之中只能又開啟了漫漫求職路。有辛酸，有坎坷，但也有點(diǎn)小幸運(yùn)。 Experience 前前后后面試了6家公司，總結(jié)一下問(wèn)題做一個(gè)backup。（僅記錄問(wèn)...

    CoffeX 評(píng)論0 收藏0

  • react基本原理及性能優(yōu)化

    摘要：對(duì)同一層級(jí)的子節(jié)點(diǎn)進(jìn)行處理時(shí)，會(huì)根據(jù)進(jìn)行簡(jiǎn)要的復(fù)用。二性能優(yōu)化方案由于中性能主要耗費(fèi)在于階段的算法，因此性能優(yōu)化也主要針對(duì)算法。此時(shí)最常用的優(yōu)化方案即為方法?；蛘咧苯邮褂?，原理一致。 一、從React原理談起 react是什么？ showImg(https://segmentfault.com/img/bVbcYvf?w=1140&h=384); react是用于構(gòu)建用戶界面的JS框架...

    VincentFF 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<