React 中的核心

1、什麼是虛擬DOM

本質：用JS對象的形式，來模擬頁面上DOM嵌套的關係；（虛擬DOM是以JS對象的形式存在的）
目的：就是爲了實現頁面元素的高效更新。

    <!--舊DOM-->
	<div id="mydiv"  title="說實話" data-index="0">
		彬哥好帥
		<p>哈哈哈</p>
	</div>
	<!--新DOM-->
	<div id="mydiv"  title="說實話123" data-index="0">
		彬哥好帥
		<p>哈哈哈qqq</p>
	</div>

用JS對象的形式如下圖：

2、Diff算法

• tree diff：新舊兩顆DOM樹，逐層對比的過程，就是Tree Diff；當整棵DOM 逐層對比完畢，則所有需要被按需更新的元素，必然能夠找到；
• component diff：在進行Tree Diff的時候，每一層中，組件級別的對比，叫做Component Diff;
  (1) 如果對比前後，組件類型相同，則暫時認爲此組件不需要被更新
  (2)如果對比前後，組件類型不同，則需要移除舊組件，創建新組件，並追加到頁面上；
• element diff ：在進行組件對比的時候，如果兩個組件類型相同，則需要進行元素級別的對比。