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 ：在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比。