转载:
https://blog.csdn.net/a18792627168/article/details/114479971
浏览器渲染
下图是浏览器的渲染图,下面会介绍虚拟DOM
可以看到这里,浏览器渲染需要三个引擎,HTML引擎、CSS引擎、JS引擎,页面渲染直接和html、css相关,生成一个DOM树和css规则树,最后合成一个渲染树,最后根据渲染树布局和绘制的操作,成本最高的布局,其次会绘制,绘制无法避免,但是我们可以减少绘制的次数,如果是jquery的话,每循环一次,整个页面就会刷新,效率很低。
虚拟DOM
diff算法对比
虚拟DOM是为了避免渲染(布局和绘制)的次数,发明了diff算法,这里将原生的DOM用JS来表示,在操作的时候有一个对比方式,如下图:
查看这个图可以发现,diff算法只是对dom内部针对不同元素做不同的刷新,如果元素变化就进行替换操作,内部元素改变就进行文本变化,参数变化只是进行props操作。简单意思是什么变化就进行什么操作(变化之后统一操作)。
浏览器做DOM操作的成本太高,故而采用虚拟DOM。
实现虚拟dom可以使用createElement实现。
注意:这里具体实现虚拟DOM是通过React.createElement()创建。document.createElement创建真实DOM。
React.createElement()
这里实现一个简单的React.createElement()例子:
-
简单标签实现的方式
-
<!-- 需要实现的标签 -->
-
<h1 id="title">Hello,React!
</h1>
-
-
// React.createElement()实现的代码
-
const VDiv = React.createElement('h1',{id:'title'},'Hello,React!');
-
-
-
-
嵌套标签实现的方式
-
<!-- 需要实现的标签 -->
-
<h1 id="title">
<span>Hello,React!
</span>
</h1>
-
-
// React.createElement()实现的代码
-
const VDiv = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React!'));
然而,Jsx实现的的代码是
-
const VDiv = (
-
<h1 id="title">
-
<span>Hello,React!
</span>
-
</h1>
-
)
经过对比可以发现:React.createElement()创建虚拟DOM太过于繁琐,JSX的作用是为让开发人员更简单的创建虚拟DOM,这里经过翻译之后的代码运行到浏览器之后一定是React.createElement()实现的代码部分。
Jsx创建DOM的实现方法是React.createElement()方法的语法糖。
总结
1.创建虚拟DOM的两种方式:
- 纯js React.createElement()
- Jsx
在React内一般使用Jsx。
2.虚拟DOM的本质
- 本质是Object类型的对象(一般对象)
- 虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在使用,无需真实DOM上那么多属性(轻和重指的是属性的多少)
- 虚拟DOM最终会被React转换为真实DOM,展示在页面上。