React.js--4.使用react渲染虚拟DOM到页面上

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1.在命令行输入：cnpm i react react-dom -S

2.在index.html中创建一个容器，将来渲染的虚拟DOM会存放在这个容器中

3.导入包：在index.js中导入

import React from 'react'       //创建组件，虚拟dom元素，生命周期
import ReactDOM from 'react-dom'  //把创建好的组件和虚拟dom放到页面上展示

4.创建虚拟DOM元素

//参数1：创建元素的类型，字符串，表示元素的名称

//参数2：是一个对象或者null，表示当前这个DOM元素的属性

//参数3：子节点（包括其虚拟DOM或获取文本子节点）

//参数n：其他子节点

//例如：

<h1 id="myh1" title="this is h1">这是一个h1</h1>
const myh1 = React.createElement('h1',{id:'myh1',title:'this is a h1'})

5.渲染：使用ReactDom把虚拟dom渲染到页面上

使用ReactDOM把虚拟dom渲染到页面上
//参数1：要渲染的哪个虚拟DOM元素
//参数2：指定页面上一个容器
ReactDOM.render(myh1,document.getElementById('app'));

6.运行：输入命令：

npm run dev

7.结果为：

以上是 React.js--4.使用react渲染虚拟DOM到页面上 的全部内容， 来源链接： utcz.com/z/382151.html

回到顶部