React虚拟DOM及创建虚拟DOM的两种方式

1.虚拟DOM是什么？

一个虚拟DOM(元素)是一个一般的js对象，准确的说是一个对象树(倒立的)；虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应；如果只是更新虚拟DOM，页面是不会重绘的。
Virtual DOM 算法的基本步骤：
用JS对象树表示DOM树的结构；然后用这个树构建一个真正的DOM树插到文档当中；当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异；把差异应用到真实DOM树上，视图就更新了。
进一步理解：
Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

2.JSX

（1）JSX（JavaScript XML）

react定义的一种类似于XML的JS扩展语法：XML+JS。
作用：用来创建react虚拟DOM（元素）对象。
js中直接可以套标签，但标签要套js需要放在{}中，在解析显示js数组时，会自动遍历显示。
把数据的数组转换为标签的数组：

1
2
3
4
5
1var liArr = dataArr.map(function(item, index){

2        return <li key={index}>{item}</li>

3      })

4

5

注意：标签必须有结束；标签的class属性必须改为className属性；标签的style属性值必须为: {{color:‘red’, width:12}}

例如：

1
2
3
1var ele = <h1>Hello JSX<h1>

2

3

注意：它不是字符串，也不是HTML/XML标签；它最终产生的就是一个JS对象。

（2）标签名任意：HTML标签或其他标签；标签属性任意：HTML标签属性或其他。

（3）基本语法规则

遇到 <开头的代码，以标签的语法解析：html同名标签转换为html同名元素，其它标签需要特别解析；遇到以 { 开头的代码，以JS的语法解析: 标签中的js代码必须用{}包含。

（4）babel.js的作用

浏览器的js引擎是不能直接解析JSX语法代码的，需要babel转译为纯JS的代码才能运行；只要用了JSX，都要加上type=“text/babel”，声明需要babel来处理。

3.渲染虚拟DOM（元素）

语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到真实容器DOM中显示
参数说明：
参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

4.创建虚拟DOM的两种方式

（1）纯js（一般不用）

1
2
3
1React.createElement('h1', {id:'myTitle'}, title)

2

3

（2）JSX

页面结构：

1
2
3
4
5
1<h1 id='myTitle'>{title}</h1>

2<div id='example1'></div>

3<div id='example2'></div>

4

5

JS：

页面效果：