react初学（一）

虚拟DOM

DOM：

全称 Document Object Model，即文档对象模型，是可以被JS控制的页面上的元素。要做到交互和动态就需要JS与DOM的结合，通过JS改变DOM。浏览器提供的概念。

React上的虚拟DOM:

是react框架中的概念，程序员可以通过JS用来模拟页面上的DOM和DOM的嵌套。

虚拟DOM使用目的：

实现页面DOM元素的高效更新。实现方法：通过JS来模拟DOM元素和嵌套关系可以更加容易进行新旧DOM的对比，从而只渲染更新需要更改的部分。

js模拟DOM例子：

var div={
	tagName:'div',
	attrs:{
		id:'test',
		title:'测试',
		'data-index':'0',
	},
	childrens:[
		'哈哈哈',
		{
			tagName:'p',
			attrs:{},
			childrens[
				'啦啦啦'
			]
		}
	]
}

等价于

<div id="test" title="测试" data-index="0"> 
	哈哈哈
	<p>啦啦啦</p>
</div>

---

diff算法

diff算法就是如何高效更新虚拟DOM的算法。
分为三层结构：

tree diff：

新旧两颗DOM树进行逐层对比的过程，当每层都对比完之后就能确定需要更新的是哪些。

component diff:

在tree diff进行每层对比的时候在每一层内进行组件的对比。
如果对比前后组件类型相同，暂时组件不需要更新。
如果对比前后组件类型不同，移除旧组件，创建新组件并将它追加到页面上。

element diff:

在component diff中两个组件类型相同就进行元素对比的过程。

---

说明：在B站自学摘要自以为的重点。