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

溱嘉Jyyy_

已于 2024-11-17 12:10:38 修改

阅读量92

点赞数 1

文章标签： react.js 前端 javascript

于 2024-11-17 11:35:38 首次发布

原文链接：https://blog.csdn.net/liaoxuewu/article/details/83541914

版权

1.虚拟DOM是什么？

一个虚拟DOM(元素)是一个一般的js对象（object），准确的说是一个对象树(倒立的)；虚拟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数组时，会自动遍历显示。
把数据的数组转换为标签的数组：

<span style="color:#000000"><span style="background-color:#282c34"><code>var liArr = dataArr.map(function(item, index){
        return <li key={index}>{item}</li>
      })
</code></span></span>

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

例如：

<span style="color:#000000"><span style="background-color:#282c34"><code>var ele = <h1>Hello JSX<h1>
</code></span></span>

注意：它不是字符串，也不是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（一般不用）

<span style="color:#000000"><span style="background-color:#282c34"><code>React.createElement('h1', {id:'myTitle'}, title)
</code></span></span>

（2）JSX

页面结构：

<span style="color:#000000"><span style="background-color:#282c34"><code><h1 id='myTitle'>{title}</h1>
<div id='example1'></div>
<div id='example2'></div>
</code></span></span>

JS：
在这里插入图片描述