开发者学堂课程【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)
//渲染页面上的 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 : {}})* /