react快速上手一（使用js语法，创建虚拟DOM元素）

最新推荐文章于 2023-06-16 20:45:08 发布

weixin_30649641

最新推荐文章于 2023-06-16 20:45:08 发布

阅读量208

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ll15888/p/11164977.html

版权

1.装包，引包

首先需要安装两个包 react ，react-dom

cnpm  i  react  react-dom

介绍下这两个包：

react：专门用来创建React组件，组件生命周期等这些东西。

react-dom：里面主要封装了和Dom操作相关的包（例如：要把组件渲染到页面上）

装了之后就引包使用了

import  React  from  ‘react’
import ReactDom from ‘react-dom’

2.创建dom对象

在react中，如果要创建DOM元素了，只能使用React提供的JS API来创建（vue是直接创建.vue文件手写HTML元素来创建的）

var myDiv = React.createElement('div' , { title : 'wo shi div' , id = 'myDiv'} ,  '这是一个div' )

React.createElement（）方法:用于创建虚拟DOM对象，他接收3个及以上的参数。
参数1：表示要创建的元素类型，参数是个字符串类型（在此我理解为标签名字如：‘div’ ，‘p’）

参数2：表示创建的元素含有哪些属性，参数是个对象（例如有id，class，title属性）

参数3：表示当前创建元素的子节点，可以是文本内容，也可以是子标签，从第三个参数的位置开始，后面可以放好多的虚拟DOM对象（嵌套元素）
创建后的效果：

<div title="wo shi div" id="myDiv">这是一个div</div>


3.渲染到页面

ReactDom.render(myDiv , document.getElementById('app'))

ReactDom.render（）用法：

ReactDom.render(‘要渲染的虚拟DOM元素’  ,  '要渲染到页面上的那个位置中')

注意：

ReactDom.render（）方法的第二个参数，和vue不一样，React中不接受字符串“#app”，需要传递一个原生的DOM对象“document.getElementById('app')”。

转载于:https://www.cnblogs.com/ll15888/p/11164977.html

关注