使用 Rect.creatElement 实现虚拟 DOM 嵌套|学习笔记

简介: 快速学习使用 Rect.creatElement 实现虚拟 DOM 嵌套

开发者学堂课程【React 入门与实战使用 Rect.creatElement 实现虚拟 DOM 嵌套】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8082


使用 Rect.creatElement 实现虚拟 DOM 嵌套


一、实现过程的代码展示

//1.这两个导入时候,接收的成员名称,必须这么写import React  from  ’react’;//创建组件、虚拟 DoM 元素,生命周期import ReactDOM from ‘react-dom’;//把创建好的组件和虚拟 poM 放到页面上展示的

// 2.创建虚拟 DOM 元素/参数1:创建的元素的类型,字符串,表示元素的名称//参数2:是一个对象或 nul1,表示当前这个 DOM 元素的属性/参数3:子节点(包括其它虚拟 DoM 获取文本子节点)
//
参数 n :其它子节点
//这是一个大大的:1const myh1 = React.createElement ( ‘h1’, null,’这是一个大大的H1’)

const myh1 = React.createElement(’h1’,{ id: ’myh1’, title:’this is a h1’ }这是一个大大的H1 ‘)
const mydiv = React.createElement ( ’div’, null
这是一个div元素’,myh1)

image.png

//渲染页面上的 DOM 结构,最好的方式,就是写 HTML 代码

//Const mytest =

aaa

//3.使用 ReactDOM 把虚拟 DoM 渲染到页面上//参数1:要渲染的那个虚拟 DOM 元素/参数2:指定页面上一个容器ReactDOM.render (myh1, document.getzlementById ( ‘app ‘))
// Target container is not a DOM element.

经过分析,猜测:第二个参数接收的应该是一个 DOM 元素而不是选择器

/* const vm = new vue ( {
data : {},
‘#app’ ,methods : {}})* /

相关文章
|
8月前
|
JavaScript 前端开发 编译器
说说你对虚拟 DOM 的理解?
说说你对虚拟 DOM 的理解?
67 0
|
7月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
52 1
|
8月前
|
JavaScript 算法 前端开发
虚拟Dom
虚拟Dom
|
8月前
|
XML JavaScript 前端开发
web学习笔记(二十二)DOM开始
web学习笔记(二十二)DOM开始
46 0
|
8月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
83 0
webgl学习笔记3_javascript的HTML DOM
|
8月前
|
JavaScript 前端开发 算法
深入理解虚拟DOM:原理、优势与实践
深入理解虚拟DOM:原理、优势与实践
529 0
|
8月前
|
JavaScript 算法 前端开发
Vue的虚拟DOM:Vue虚拟DOM的工作原理
【4月更文挑战第24天】Vue的虚拟DOM提升渲染性能,通过创建JavaScript对象树(虚拟DOM树)来跟踪DOM变化。当状态改变,Vue用新的虚拟DOM树与旧树对比(diff算法),找到最小DOM操作集合来更新真实DOM。优化策略包括减少状态变化、使用key属性和简化组件结构。理解虚拟DOM工作原理有助于Vue的性能优化。
|
8月前
|
JavaScript 前端开发 算法
什么是虚拟dom
什么是虚拟dom
115 0
|
3月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
3月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。