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

转载：
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，展示在页面上。