伟大的虚拟DOM到真实DOM的过程

最新推荐文章于 2024-05-10 23:45:33 发布
最新推荐文章于 2024-05-10 23:45:33 发布
阅读量1.9k 收藏 5
点赞数 4
分类专栏： 前端 vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33692349/article/details/105928706
版权
前端 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏

虚拟DOM大家都不陌生，研究了一下略带收获，在这里简单记录下，做个备忘

1、什么是虚拟DOM以及虚拟DOM的表达

虚拟DOM简而言之就是，用JS去按照DOM结构来实现的树形结构对象，也就是一个JS对象而已。那么什么样的对象才能比较匹配的上dom结构呢？来看一下如下图所示的dom结构

<div class="list" style="color: red;">
    <div class="item">
        <p class="leftP">
            <span class="left" style="margin-right: 10px;">leftSpan</span>
            <span class="right">rightSpan</span></p>
        <p class="rightP">
            <img class="imgs" src="https://pics2.baidu.com/feed/94cad1c8a786c9175fd11173392345ca3ac75749.jpeg?token=8d28956f2c93b2e7090e89980059a553&amp;s=FAC2B144C3BCB469044C8C830000B081" style="width: 100px; height: 100px;">
            <span class="imgs" style="width: 100px; height: 100px;">图片旁边的span</span>
        </p>
    </div>
    <p class="item">玉溪</p>
    <p class="item">黄鹤楼</p>
</div>

上图是比较简单的一个结构，比较理想的是使用如下对象来模拟：

{
   //节点类型
  "type": "div",
   //节点属性 
  "props": {
    "class": "list",
    "style": "color:red;"
  },
   //子节点
  "children": [
    {
      "type": "div",
      "props": {"class": "item"},
      "children": [
        {
          "type": "p",
          "props": {"class": "leftP"},
          "children": [
            {
              "type": "span",
              "props": {
                "class": "left",
                "style": "margin-right:10px"
              },
              "children": ["leftSpan"]
            },
            {
              "type": "span",
              "props": {"class": "right"},
               //没有子节点了，直接显示文本
              "children": ["rightSpan"]
            }
          ]
        },
        {
          "type": "p",
          "props": {"class": "rightP"},
          "children": [
            {
              "type": "img",
              "props": {
                "class": "imgs",
                "style": "width:100px;height:100px",
                "src": "https://pics2.baidu.com/feed/94cad1c8a786c9175fd11173392345ca3ac75749.jpeg?token=8d28956f2c93b2e7090e89980059a553&s=FAC2B144C3BCB469044C8C830000B081"
              },
              "children": []
            },
            {
              "type": "span",
              "props": {
                "class": "imgs",
                "style": "width:100px;height:100px"
              },
              "children": ["图片旁边的span"]
            }
          ]
        }
      ]
    },
    {
      "type": "p",
      "props": {"class": "item"},
      "children": ["玉溪"]
    },
    {
      "type": "p",
      "props": {"class": "item"},
      "children": ["黄鹤楼"]
    }
  ]
}

OK，对象结构已经解析完成，接下来我们就看怎么批量生成这样的结构，直接上代码

// 定义一个构造函数来
class Element {
    constructor(type, props, children) {
        this.type = type;
        this.props = props;
        this.children = children;
    }
};

 //生成虚拟dom对象 （批量调用构造函数，）
 class  createElement=(type,props,children)=>{
     return new Element(type,props,children);
  };

我们只需要调用createElement即可生成上述的dom对象结构，他接收三个参数，第一个表示dom元素的类型，第二个表示要设置的属性，第三个则表示子元素。生成上述结构调用代码如下：

let virtualDom = createElement(
            'div',
            {class:'list',style:'color:red;'},
            [
                //div
                createElement(
                    'div',
                    {class:'item'},
                    [
                        //p
                        createElement(
                            'p',
                            {class:'leftP'},
                            [
                                //span
                                createElement('span',{class:'left',style:'margin-right:10px'},['leftSpan']),
                                //span
                                createElement('span',{class:'right'},['rightSpan']),
                            ]
                        ),
                        //p
                        createElement('p',{class:'rightP'},[
                            createElement(
                                'img',
                                {
                                    class:'imgs',
                                    style:'width:100px;height:100px',
                                    src:'https://pics2.baidu.com/feed/94cad1c8a786c9175fd11173392345ca3ac75749.jpeg?token=8d28956f2c93b2e7090e89980059a553&s=FAC2B144C3BCB469044C8C830000B081'
                                },
                                [],
                            ),
                            createElement(
                                'span',
                                {
                                    class:'imgs',
                                    style:'width:100px;height:100px',
                                },
                                ['图片旁边的span'],
                            ),
                        ]),
                    ]
                ),
                createElement('p',{class:'item'},['玉溪']),
                createElement('p',{class:'item'},['黄鹤楼']),
            ]
    );
    console.log(virtualDom);

我们可以在控制台很清楚的看到打印出来的结构正是我们想要的结构

2、虚拟DOM转换成真实的DOM  

上面我们已经实现了一个虚拟DOM的表达，也就是我们可以轻而易举的通过一个对象来表达一个dom了，接下来我们看看怎么把虚拟dom转换成我们的真实dom，也就是吧我们的对象转换回我们的真实DOM，从而在页面显示。

直接上代码如下：

    // 设置属性
    const setAttr = (node, key, value)=> {
        // 需要判断key是什么
        switch (key) {
        case 'value':
            // 属性是value就要看标签类型了，input和textarea的value就需要做区别
            if (node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() == 'textarea') {
                node.value = value;
            } else {
                node.setAttribute(key, value);
            }
            break;
        case 'style':
            node.style.cssText = value;
            break;
        default:
            node.setAttribute(key, value);
            break;
        }
    }; 

const render=(domObj)=> {
        // 根据元素类型来创建dom
        let el = document.createElement(domObj.type);
    
        // 遍历props对象，然后给创建的元素el设置属性
        for (let key in domObj.props) {
            // 设置属性的方法
            setAttr(el, key, domObj.props[key]);
        }
    
        // 遍历子节点数组
        domObj.children.forEach(child =>{
            // 需要注意的是：如果child是虚拟dom，就继续递归渲染
            if (child instanceof Element) {
                child = this.render(child);
            } else {
                // 只是普通的文本内容
                child = document.createTextNode(child);
            }
            // 把子节点添加到父节点中
            el.appendChild(child);
        });
    
        return el;
    };

直接调用我们的render函数，并把对应的虚拟DOM传入即可，接着上一步，我们已经生成了了虚拟dom对象virtualDom，因此只需要调用如下：

    // 得到dom元素
    let el = render(virtualDom); 
    console.log(el);
    //插入页面
    document.getElementById('app').appendChild(el)

到此，我们的转换也就告一段了。

3、整个过程的封装

virtualDom.js

// 定义一个构造函数来
class Element {
    constructor(type, props, children) {
        this.type = type;
        this.props = props;
        this.children = children;
    }
};


export default function VirtualDom(extendsObj={}){
    Object.assign(this,extendsObj);

     // 设置属性
    const setAttr = (node, key, value)=> {
        // 需要判断key是什么
        switch (key) {
        case 'value':
            // 属性是value就要看标签类型了，input和textarea的value就需要做区别
            if (node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() == 'textarea') {
                node.value = value;
            } else {
                node.setAttribute(key, value);
            }
            break;
        case 'style':
            node.style.cssText = value;
            break;
        default:
            node.setAttribute(key, value);
            break;
        }
    };

    //生成虚拟dom （批量调用构造函数，）
    this.createElement=(type,props,children)=>{
        return new Element(type,props,children);
    };
    //生成真实dom
    this.render=(domObj)=> {
        // 根据元素类型来创建dom
        let el = document.createElement(domObj.type);
    
        // 遍历props对象，然后给创建的元素el设置属性
        for (let key in domObj.props) {
            // 设置属性的方法
            setAttr(el, key, domObj.props[key]);
        }
    
        // 遍历子节点数组
        domObj.children.forEach(child =>{
            // 需要注意的是：如果child是虚拟dom，就继续递归渲染
            if (child instanceof Element) {
                child = this.render(child);
            } else {
                // 只是普通的文本内容
                child = document.createTextNode(child);
            }
            // 把子节点添加到父节点中
            el.appendChild(child);
        });
    
        return el;
    };
    // 将元素插入页面
    this.renderDom = (el, target)=> {
        target.appendChild(el);
    };
}

test.js(测试文件)

import VirtualDom from './virtualDom.js';
const testDom = ()=>{ 
    let virtualDom = new VirtualDom();
    console.log(virtualDom);
    let domObj = virtualDom.createElement(
            'div',
            {class:'list',style:'color:red;'},
            [
                //div
                virtualDom.createElement(
                    'div',
                    {class:'item'},
                    [
                        //p
                        virtualDom.createElement(
                            'p',
                            {class:'leftP'},
                            [
                                //span
                                virtualDom.createElement('span',{class:'left',style:'margin-right:10px'},['leftSpan']),
                                //span
                                virtualDom.createElement('span',{class:'right'},['rightSpan']),
                            ]
                        ),
                        //p
                        virtualDom.createElement('p',{class:'rightP'},[
                            virtualDom.createElement(
                                'img',
                                {
                                    class:'imgs',
                                    style:'width:100px;height:100px',
                                    src:'https://pics2.baidu.com/feed/94cad1c8a786c9175fd11173392345ca3ac75749.jpeg?token=8d28956f2c93b2e7090e89980059a553&s=FAC2B144C3BCB469044C8C830000B081'
                                },
                                [],
                            ),
                            virtualDom.createElement(
                                'span',
                                {
                                    class:'imgs',
                                    style:'width:100px;height:100px',
                                },
                                ['图片旁边的span'],
                            ),
                        ]),
                    ]
                ),
                virtualDom.createElement('p',{class:'item'},['玉溪']),
                virtualDom.createElement('p',{class:'item'},['黄鹤楼']),
            ]
    );
    console.log(domObj );
    // 渲染dom
    let el = virtualDom.render(domObj); // 得到dom元素
    console.log(el);
    virtualDom.renderDom(el,document.getElementById('app'));
    
};

export {
    testDom
}

 

 

Larru-Sun
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端手写(二十七)——虚拟dom转化为真实dom
weixin_47450807的博客
04-03 1773
一、写在前面 在SPA时代，虚拟dom随处可见，虚拟dom的好处之一是为了更好的跨平台，并且虚拟dom占用内存大小，要比真实dom小的多，因为真实dom上的属性太多，虚拟dom可以理解为真实dom的抽象。下面将写一个render函数来将虚拟DOM转化为真实dom。 二、手写 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-
vue 源码解析之虚拟Dom-render
10-16
总的来说，Vue的虚拟DOM和`render`过程涉及到了组件的渲染逻辑、DOM更新的调度以及对不同环境的兼容策略。通过理解这些源码细节，开发者可以更好地掌握Vue的工作原理，优化应用性能，以及更深入地调试和解决问题。
虚拟dom 转真实dom
HQ\(^o^)/的博客
07-25 938
虚拟dom转真实dom
虚拟DOM的解析过程
最新发布
zcBaluga的博客
05-10 190
同时，虚拟 DOM 的比较和更新过程也是高度优化的，只对需要进行更新的部分进行操作，减少了不必要的 DOM 操作，提高了渲染效率。5.应用更新补丁：将生成的更新补丁应用到真实DOM上，进行实际的DOM操作，以达到将真实DOM更新为新的组件状态和结构的目的。2.生成新的虚拟DOM树：随着组件状态的改变，会触发数据更新，从而生成一个新的虚拟DOM树，以表示更新后的组件状态和结构。1.构建初始的虚拟DOM树：在组件渲染的过程中，会创建一个初始的虚拟DOM树，来描述当前组件的状态和结构。
虚拟dom转真实dom
m0_46430338的博客
12-27 466
初版 // 文本节点 vDom: string // 元素节点 vDom: object {tag:'div', classList: [], value: 'div', children: [{...},{...}]} const virtualDomToDom = vDom => { let parentNode = document.querySelector('body') const toDom = vDom => { const vDomType = typeo
虚拟DOM转为真实DOM
W1254667的博客
01-09 113
【代码】虚拟DOM转为真实DOM。
vue 虚拟DOM的原理
10-14
主要介绍了vue 虚拟DOM的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
详解操作虚拟dom模拟react视图渲染
10-18
主要介绍了详解操作虚拟dom模拟react视图渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
从VirtualDom（虚拟Dom）到真实DOM
前端小记
03-30 3092
虚拟Dom实现为真实Dom结构并进行更新的集合说明，包含虚拟Dom和真实Dom的互相转换以及更新时候的比较，在react和Vue以及后续版本应用的逻辑说明。本文展示的代码仅仅是简单初级代码，关于React和Vue中的diff算法和真实dom以及虚拟dom的互相转换请参考react和Vue的官方源码。
【笔记】将虚拟DOM转换为真实DOM （render）
qq_36864724的博客
02-20 362
【代码】【笔记】将虚拟DOM转换为真实DOM （render）
虚拟DOM实现流程
忆初
08-06 411
  尚未使用虚拟DOM 方案一： 1． state数据 2．JSX模版 3，数据＋模版结合，生成真实的DOM，来显示 4． state发生改变 5.   数据＋模版结合，生成真实的DOM，替換原始的DOM   缺陷： 第一次生成了ー个完整的DOM片段 第二次生成了一个完整的DOM片段 第二次的D0M替换第一次的DOM，非常耗性能 方案二： 1． state数据 2．J...
Web前端学习之虚拟DOM如何进化为真实DOM
xuezhangmen的博客
12-22 903
例如前面的例子，假如一次操作中有 10 次更新 DOM 的动作，虚拟DOM不会立即操作DOM，而是将这 10 次更新 DOM 的动作通过Diff算法最终生成一个js对象，然后通知浏览器去执行一次绘制工作，这样可以避免大量的无谓的计算量。Vue和React的Render函数中都涉及到了Virtual DOM的概念，Virtual DOM也是性能优化上的重要一环，同时突破了直接操作真实DOM的瓶颈，本文带着以下几个问题来阐述Virtual DOM。获取之前app的父亲body。，可想而知，是多么庞大的数据量。
模拟Dom转换为真实Dom
weixin_44423378的博客
08-01 231
【代码】模拟Dom转换为真实Dom。
深入分析虚拟DOM的渲染过程和特性
油墨香^-^的博客
06-18 521
作者 | code秘密花园/ ConardLi 导读 React的虚拟 DOM和 Diff算法是 React的非常重要的核心特性，这部分源码也非常复杂，理解这部分知识的原理对更深入的掌握 React是非常必要的。 本来想将虚拟 DOM和 Diff算法放到一篇文章，写完虚拟 DOM发现文章已经很长了，所以本篇只分析虚拟 DOM。 本篇文章从源码出发，分析虚拟 DOM的核心渲染原理，以及 React对它做的性能优化点。 说实话 React源码真的很难读😅，如果本篇文章帮助到了你，那么请给个赞👍支持
详解虚拟DOM与Diff算法
油墨香^-^的博客
06-24 948
最近复习到虚拟DOM与Diff，翻阅了众多资料，特此总结了这篇长文，加深自己对vue的理解。 这篇文章比较详细的分析了vue的虚拟DOM,Diff算法，其中一些关键的地方从别处搬运了一些图进行说明(感谢制图的大佬)，也包含比较详细的源码解读。 真实DOM的渲染 在讲虚拟DOM之前，先说一下真实DOM的渲染。 浏览器真实DOM渲染的过程大概分为以下几个部分： 构建DOM树。通过htmlparser解析处理html标记，将它们构建为DOM树(DOM tree)，当解析器遇到非阻塞资源(图片，.
Vue.js从Virtual DOM映射到真实DOM的过程
weixin_34072637的博客
08-29 817
写在前面 Virtual DOM的概念相信大家都不会陌生，Vritual DOM是相对与DOM(文档对象模型)来说的，MDN上关于DOM的定义：“DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容”。相对于频繁地去操作DOM...
虚拟DOM和真实DOM的关系
雷佳佳的博客
06-13 4017
虚拟DOM和真实DOM的关系 首先，Virtual DOM并没有完全实现DOM，即虚拟DOM和真正地DOM是不一样的，Virtual DOM最主要的还是保留了Element之间的层次关系和一些基本属性。因为真实DOM实在是太复杂，一个空的Element都复杂得能让你崩溃，并且几乎所有内容我根本不关心好吗。所以Virtual DOM里每一个Element实际上只有几个属性，即最重要的，最为有用的，并...
react 虚拟dom和真实dom
08-28
React中的虚拟DOM和真实DOM是用于构建用户界面的两个不同的概念。虚拟DOM是React中的一种技术，它是通过在内存中创建一个轻量级的JavaScript对象来表示DOM结构的副本。这个副本被称为虚拟DOM树。React使用虚拟DOM来表示用户界面的状态，并根据需要对其进行更新。 真实DOM则是浏览器中实际存在的DOM树，它是由HTML文档解析而来，并且直接与用户交互。当使用React创建虚拟DOM后，React会比较虚拟DOM和真实DOM之间的差异，并且仅更新真实DOM中需要改变的部分，从而提高性能和效率。 虚拟DOM的主要优势在于它可以在内存中进行快速的操作和计算，而不会直接影响到真实DOM。这使得React可以通过一系列优化算法来批量更新DOM，从而减少了对浏览器的重绘和重排，提高了性能。 总结来说，React的虚拟DOM是通过在内存中创建一个轻量级的JavaScript对象来表示DOM结构的副本，而真实DOM是浏览器中实际存在的DOM树。React使用虚拟DOM来管理用户界面的状态，并将其转化为真实DOM更新到浏览器中。这种机制提高了React应用的性能和效率。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?](https://blog.csdn.net/echolunzi/article/details/125586796)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值