把react虚拟dom注入html,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数组时，会自动遍历显示。

把数据的数组转换为标签的数组：

var liArr = dataArr.map(function(item, index){

return

{item}

})

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

例如：

var ele =

Hello JSX

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

(2)标签名任意：HTML标签或其他标签；标签属性任意：HTML标签属性或其他。

(3)基本语法规则

遇到

(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(一般不用)

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

(2)JSX

页面结构：

{title}

JS：

页面效果：

关注微博、微信公众号搜索前端小木，让我们一起学习成长。