簡述dom diff原理

isLishude 發布于2019-08-23 16:59 / 1082人閱讀

摘要：但是我一直信奉一個原則，即但凡復雜的知識，理解之后都只需要記憶簡單的東西，而想簡單精確描述一個復雜知識，是極困難的事。兩個相同的節點，虛擬會認為是同一個節點，從而對其進行比較。

前言：

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

正文

dom diff是什么？
1.從根節點開始遍歷所有節點；
2.對于不同類型的標簽，刪除原標簽，新建標簽；
3.對于類型相同、屬性不同的標簽，只修改屬性；
4.對于同一個父節點下的復數同類型標簽（即列表類型），基于key對比、修改。

解析 關于1：

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

關于2：

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

、之類的也適用
-標簽位置只相對于父節點有意義。假設原本A節點的父節點是B，更新后A節點的父節點是C，那么對于dom diff來說，原本的A節點會被銷毀，在C節點下的A節點是一個新的節點，跟原本的A節點沒有關系

關于3：

-這一個比較好理解，對于僅僅屬性不同的標簽，修改屬性即可

關于4

-假設一個div下有五個span節點，此時我們要插入一個節點

虛擬dom并不知道插入后是ABFCDE，而會認為除了AB以外的節點都改變了
所以對于虛擬dom來說此時是ABGHIJ，付出了額外的消耗。
于是react引入了key的概念。兩個key相同的節點，虛擬dom會認為是同一個節點，從而對其進行比較。引入了key之后，react就知道節點是ABFCDE了。

GPU云服務器云服務器簡述mapreduce原理簡述服務器工作原理 diff array_diff

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

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

前端面試分享: 兩年經驗社招-阿里巴巴

摘要：作者兩年經驗第一家任職的是個小公司第二家算是二線互聯網公司各待了一年吧能有機會去阿里面試很驚喜先來和大家分享一下面試經歷電話面試初探因為還在職的緣故電話面試從晚上點鐘開始持續了半個小時左右一開始的時候特比緊張甚至聲音略有些顫抖簡單自我介紹做作者兩年經驗, 第一家任職的是個小公司, 第二家算是二線互聯網公司, 各待了一年吧... 能有機會去阿里面試很驚喜! 先來和大家分享一下面試經歷....

JowayYoung 2019-08-22 15:06 評論0 收藏0
vue總結

摘要：用創建好的實例調用守衛中傳給的回調函數。注冊一個全局守衛。這和類似，區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就被調用僅代表個人見解，能力有限，如有錯誤會誤人子弟的地方歡迎留言指出謝謝原文地址 vue(前端框架)解決了什么問題？現在的前端頁面元素越來越多，結構也變得越來越復雜,當數據和視圖混合在一起的時候對它們的處理會十分復雜，同時也很容易出現錯...

Youngs 2019-08-23 18:38 評論0 收藏0
常見react面試題匯總（適合中級前端）

摘要：但在中會有些不同，包含表單元素的組件將會在中追蹤輸入的值，并且每次調用回調函數時，如會更新，重新渲染組件。在構造函數中調用的目的是什么在被調用之前，子類是不能使用的，在中，子類必須在中調用。將使用單個事件監聽器監聽頂層的所有事件。已經開源地址：https://github.com/nanhupatar...關注我們團隊：showImg(https://segmentfault.co...

leone 2019-08-23 12:40 評論0 收藏0
記2019前端面經

摘要：寒冬來臨，卷入動蕩之中只能又開啟了漫漫求職路。前前后后面試了家公司，總結一下問題做一個。這半年來因為種種原因對技術上有些許的松懈和怠慢，所幸還能拿到了自己很滿意的，未來的路還要更加努力的走 Motivation 2019寒冬來臨，卷入動蕩之中只能又開啟了漫漫求職路。有辛酸，有坎坷，但也有點小幸運。 Experience 前前后后面試了6家公司，總結一下問題做一個backup。（僅記錄問...

CoffeX 2019-08-26 13:41 評論0 收藏0
react基本原理及性能優化

摘要：對同一層級的子節點進行處理時，會根據進行簡要的復用。二性能優化方案由于中性能主要耗費在于階段的算法，因此性能優化也主要針對算法。此時最常用的優化方案即為方法。或者直接使用，原理一致。一、從React原理談起 react是什么？ showImg(https://segmentfault.com/img/bVbcYvf?w=1140&h=384); react是用于構建用戶界面的JS框架...

VincentFF 2019-08-22 18:27 評論0 收藏0