React 虚拟Dom 转成真实Dom 实现原理

React 和 React-Dom 是核心模块

React：是核心库，当使用JSX语法时，必须让React 存在当前作用域下

React元素：是通过JSX语法创建的在JS中存在的HTML的标签

JSX语法：是一种JS和Html组合1的一种混合语法

ReactDOM.render:

1> 把虚拟的DOM转换成真实的DOM

2> 把真实的DOM插入到根元素中

3> ReactDOM 当render渲染时，会把根元素中的所有DOM结构进行替换

4> 第三个参数是个回调函数，当把真实DOM渲染到页面时，执行这个地方的回调函数

class Element{constructor(type,attr,children){this.type=type;this.attr=attr;this.children=children;/*this.props={...attr,children:children}*/}render(){// 这个方法将虚拟的DOM转成真实的DOM；let ele = document.createElement(this.type);// 2. 设置行间属性for(let key in this.attr){let _key = key;if(key==="className"){_key="class"}if(key==="htmlFor"){_key="for"}ele.setAttribute(_key,this.attr[key]);}// 3.childrenthis.children.forEach(item=>{// 如果数组中的成员是Element的实例,需要继续调用render方法；将虚拟的DOM转成真实的DOM；// 循环子节点，都放入ele中；let curEle = item instanceof Element?item.render():document.createTextNode(item);ele.appendChild(curEle);});return ele;// 将创建的元素转成DOM返回；}
}
let obj = {createElement(type,attr,...children){// type: 元素类型// attr：行间属性// children : 子节点 ... 把多余的参数放进一个数组中；return new Element(type,attr,children)}
}
let objDOM ={render(element,container){// container : 容器，根元素；// element: 虚拟的DOM对象；当render执行时，让这个虚拟的DOM转成真实的DOM；container.appendChild(element.render())}
}
let y = obj.createElement("div",{a:1,className:12},"中国北京")
objDOM.render(y,document.getElementById("root"))
复制代码

来吧

React 虚拟Dom 转成真实Dom 实现原理相关推荐

[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
javascript --- 将DOM结构转换成虚拟DOM 虚拟DOM转换成真实的DOM结构
虚拟DOM的实现使用虚拟DOM的原因: 减少回流与重绘将DOM结构转换成对象保存到内存中 <img /> => { tag: 'img'} 文本节点 => { tag: u ...
vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程
一.真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树--创建StyleRules--创建Render树--布局Layout--绘制Painting 第一步,用HTM ...
从VirtualDom（虚拟Dom）到真实DOM
浏览器中的Dom更新在浏览器中渲染引擎将 node 节点添加到另外节点中时会触发样式计算.布局.绘制.栅格化.合成等任务,这一过程称为重排. 除了重排之外,还有可能引起重绘或者合成操作,也就是&q ...
构建一个虚拟DOM并转换为真实DOM
关于真实DOM与虚拟DOM 1.在学习虚拟DOM之前,让我们先来了解一下真实的DOM结构,这里不得不提的是关于浏览器渲染方面的知识. 当浏览器拿到一个HTML文件,首先会根据HTML文件构建出一个DO ...
virtual DOM和真实DOM的区别_让虚拟DOM和DOMdiff不再成为你的绊脚石
来源 | https://juejin.im/post/5c8e5e4951882545c109ae9c Keep Moving 时至今日,前端对于知识的考量是越来越有水平了,逼格高大上了各类框架大 ...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲 ...
Patch:虚拟DOM最核心的部分--如何对比虚拟DOM树,以及如果生成真实DOM
虚拟DOM最核心的部分是patch,它可以将vnode渲染成真实DOM. patch也可以叫做patching算法,通过它渲染真实DOM时,并不会暴力覆盖原有DOM.而是比对新旧俩个vnode之间有哪 ...
真实DOM和虚拟DOM
文章目录如何高效操作DOM 什么是DOM 浏览器真实解析DOM的流程为什么说操作DOM耗时如何高效操作DOM 虚拟DOM 什么是虚拟DOM 为什么要有虚拟DOM 虚拟DOM的作用 Vue中的虚拟 ...

React 虚拟Dom 转成真实Dom 实现原理

React 和 React-Dom 是核心模块

React：是核心库，当使用JSX语法时，必须让React 存在当前作用域下

React元素：是通过JSX语法创建的在JS中存在的HTML的标签

JSX语法：是一种JS和Html组合1的一种混合语法

ReactDOM.render:

React 虚拟Dom 转成真实Dom 实现原理相关推荐

最新文章

热门文章

React 虚拟Dom 转成 真实Dom 实现原理

React 和 React-Dom 是核心模块

React：是核心库，当使用JSX语法时，必须让React 存在当前作用域下

React元素：是通过JSX语法创建的在JS中存在的HTML的标签

JSX语法：是一种JS和Html组合1的一种混合语法

ReactDOM.render:

React 虚拟Dom 转成 真实Dom 实现原理相关推荐

最新文章

热门文章

React 虚拟Dom 转成真实Dom 实现原理

React 虚拟Dom 转成真实Dom 实现原理相关推荐