前端手写(二十七)——虚拟dom转化为真实dom

最新推荐文章于 2024-04-23 07:00:00 发布
最新推荐文章于 2024-04-23 07:00:00 发布
阅读量1.7k 收藏 5
点赞数 3
分类专栏： js面试题 文章标签： js dom 虚拟dom render
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47450807/article/details/123941659
版权

一、写在前面
在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-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
   
      background-color: red;
    }

    .h1 {
   
      color: green;
    }
最低0.47元/天 解锁文章
卖菜的小白
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js代码-手写虚拟dom
07-15
js代码-手写虚拟dom
我的纯手写-dom思维导图
11-04
dom思维导图
伟大的虚拟DOM到真实DOM的过程
01-08
虚拟DOM大家都不陌生，研究了一下略带收获，在这里简单记录下，做个备忘 1、什么是虚拟DOM以及虚拟DOM的表达 虚拟DOM简而言之就是，用JS去按照DOM结构来实现的树形结构对象，也就是一个JS对象而已。那么什么样的对象才能比较匹配的上dom结构呢？来看一下如下图所示的dom结构 leftSpan rightSpan 图片旁边的span 玉溪 黄鹤楼 上图是比较简单的一个结构，比较理想的是使用如下对象来模拟： { //节点类型 type: d
虚拟dom转真实dom
m0_46430338的博客
12-27 461
初版 // 文本节点 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
最新发布
04-23 160
需要注意的是，虚拟DOM并不是直接创建真实DOM节点，而是在内存中创建并维护这个虚拟DOM树结构。然后，React根据虚拟DOM的变化来计算需要对真实DOM进行的操作，最终将这些操作应用到真实DOM节点上。在React中，当组件首次挂载时，虚拟DOM会被创建并被用来描述组件的UI结构。React使用了一些优化技术，例如批量更新、虚拟DOM比较算法等，来最小化DOM操作的次数。当组件首次挂载时，React会根据组件的渲染方法（render）返回的虚拟DOM结构来创建真实DOM节点。
虚拟DOM转为真实DOM
Lcyj9994399的博客
01-13 255
虚拟DOM转为真实DOM
虚拟dom 转真实dom
HQ\(^o^)/的博客
07-25 929
虚拟dom转真实dom
WPF手写输入+虚拟键盘源码
09-06
手写输入识别，虚拟键盘中\英文输入，两种模式可自行切换，自带记忆功能。可自行二次开发
MNIST数据集转化为二维图片的实现示例
09-18
在将MNIST数据集转化为二维图片的过程中，我们首先需要导入必要的库，如`tensorflow`用于加载数据集，`scipy.misc`用于将二维数组转换为实际的图片并保存。这段代码的主要步骤如下： 1. **加载MNIST数据集**：使用`...
虚拟Dom转换为真实Dom
Alone_Endeavor的博客
01-09 175
虚拟Dom转换为真实Dom
从VirtualDom（虚拟Dom）到真实DOM
前端小记
03-30 3048
虚拟Dom实现为真实Dom结构并进行更新的集合说明，包含虚拟Dom和真实Dom的互相转换以及更新时候的比较，在react和Vue以及后续版本应用的逻辑说明。本文展示的代码仅仅是简单初级代码，关于React和Vue中的diff算法和真实dom以及虚拟dom的互相转换请参考react和Vue的官方源码。
React 手写render方法，将虚拟DOM转为真实DOM
qq_56303170的博客
09-09 589
特点定义并使用函数式组件babel转译后的代码打印element发现我们可以看到element的type不再是div等标签，而是一个函数获取在父组件下的完整虚拟dom。
构建一个虚拟DOM并转换为真实DOM
qq_38918017的博客
08-31 2256
关于真实DOM与虚拟DOM 1.在学习虚拟DOM之前，让我们先来了解一下真实的DOM结构，这里不得不提的是关于浏览器渲染方面的知识。 当浏览器拿到一个HTML文件，首先会根据HTML文件构建出一个DOM树来，并行加载CSS文件，图片，JS脚 本，值得注意的是DOM树的渲染和CSSOM渲染是并行执行的，而不是串行进行的。 （JS脚本需要在html尾部加载，或是写入window.onload方法里，让DOM加载完成后再去加载JS脚本，防止 进程阻塞，JS脚本是同步加载的）。 在构建
虚拟DOM与真实DOM
qq_45679015的博客
12-21 164
先来个简单的React例子~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
《关于把虚拟dom转换成真实dom原来是这么一回事》
SCUhzs
12-07 635
文章目录真实dom结构创建虚拟dom的思路将虚拟DOM映射为真实DOM确定VNode的结构创建一个结点的方法给结点设置properties的方法将一个virtualdom转换成真实dom对象将一个节点添加到root元素上测试完整代码成功渲染 真实dom结构 在学习虚拟DOM之前，先来了解一下真实的DOM结构，这里不得不提的是关于浏览器渲染方面的知识。 当浏览器拿到一个HTML文件，首先会根据HTML文件构建出一个DOM树来，并行加载CSS文件，图片，JS脚本，值得注意的是DOM树的渲染和CSSOM渲染是
【笔记】将虚拟DOM转换为真实DOM （render）
qq_36864724的博客
02-20 352
【代码】【笔记】将虚拟DOM转换为真实DOM （render）
Web前端学习之虚拟DOM如何进化为真实DOM
xuezhangmen的博客
12-22 889
例如前面的例子，假如一次操作中有 10 次更新 DOM 的动作，虚拟DOM不会立即操作DOM，而是将这 10 次更新 DOM 的动作通过Diff算法最终生成一个js对象，然后通知浏览器去执行一次绘制工作，这样可以避免大量的无谓的计算量。Vue和React的Render函数中都涉及到了Virtual DOM的概念，Virtual DOM也是性能优化上的重要一环，同时突破了直接操作真实DOM的瓶颈，本文带着以下几个问题来阐述Virtual DOM。获取之前app的父亲body。，可想而知，是多么庞大的数据量。
手写vue的vNode转化dom方法
06-02
在 Vue 中，可以通过 `render` 函数或者模板来生成虚拟 DOM，而将虚拟 DOM 转化为真实 DOM 的过程，就是 Vue 中的“渲染”。在 Vue 中，提供了一个 `createElment` 函数，可以将虚拟 DOM 转换成真实 DOM。 下面是一个手写 Vue 的 vNode 转化 dom 的例子： ``` function render() { return h('div', { class: 'container' }, [ h('h1', null, 'Hello, World!'), h('p', null, 'This is a paragraph.') ]) } const container = document.getElementById('app') const vnode = render() const dom = createDOM(vnode) function createDOM(vnode) { if (typeof vnode === 'string') { return document.createTextNode(vnode) } const el = document.createElement(vnode.tag) if (vnode.data && vnode.data.attrs) { Object.keys(vnode.data.attrs).forEach(key => { el.setAttribute(key, vnode.data.attrs[key]) }) } vnode.children.forEach(child => { el.appendChild(createDOM(child)) }) return el } container.appendChild(dom) ``` 在上面的例子中，我们先通过 `render` 函数生成一个虚拟 DOM，然后通过 `createDOM` 函数将虚拟 DOM 转换成真实 DOM，最后将真实 DOM 添加到页面中。 在 `createDOM` 函数中，首先判断当前节点是否是一个文本节点，如果是，则通过 `document.createTextNode` 方法创建一个文本节点并返回；否则，通过 `document.createElement` 方法创建一个元素节点，并将节点的属性和子节点递归创建。 需要注意的是，`vnode` 的属性和子节点都保存在 `data` 对象中，属性保存在 `data.attrs` 中，子节点保存在 `children` 中。在创建元素节点时，需要遍历属性和子节点，并分别设置到元素节点中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值