虚拟DOM了解、创建及React.createElement()

妖狐艹你老母 2022-11-06 00:56 171阅读 0赞

## 浏览器渲染 ##

下图是浏览器的渲染图，下面会介绍虚拟DOM

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

可以看到这里，浏览器渲染需要三个引擎，HTML引擎、CSS引擎、JS引擎，页面渲染直接和html、css相关，生成一个DOM树和css规则树，最后合成一个渲染树，最后根据渲染树布局和绘制的操作，成本最高的布局，其次会绘制，绘制无法避免，但是我们可以减少绘制的次数，如果是jquery的话，每循环一次，整个页面就会刷新，效率很低。

## 虚拟DOM ##

### diff算法对比 ###

虚拟DOM是为了避免渲染（布局和绘制）的次数，发明了diff算法，这里将原生的DOM用JS来表示，在操作的时候有一个对比方式，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1][]

查看这个图可以发现，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，展示在页面上。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221023/6b92159c296c4d67ad3bdf35401e4323.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1]: /images/20221023/2d75a7b7f4224c4d840c01e9540ec5b0.png