react使用js创建虚拟dom的两种方法、区别以及jsx语法规则

使用js创建虚拟dom的两种方法

使用js

如果现在需要在h1里面加一个span标签,怎么加呢?

使用JSX

javascript 复制代码
 <script type="text/babel">
    const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
      <h1 id="title">
        <span>Hello,React</span>
      </h1>
    )
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>

使用JS

javascript 复制代码
  <script type="text/javascript">
    const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'Hello,React'))
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>

如果多层标签实行嵌套,使用JS就会很麻烦,推荐使用JSX,更加方便的创建虚dom

虚拟dom与真实dom的区别

虚拟dom就相当于是一个object类型的对象

如果写了console,借助浏览器的控制台给你输出,那么就直接输出了标签,想看属性可以加一个debugger;在source中查看,把鼠标放上去,会发现真实dom有很多的属性

javascript 复制代码
 <script type="text/babel"> /* 此处一定要写babel */
    //1.创建虚拟DOM
    const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
      <h1 id="title">
        <span>Hello,React</span>
      </h1>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

    const TDOM = document.getElementById('demo')
    console.log('虚拟DOM', VDOM);
    console.log('真实DOM', TDOM);
    debugger;
    // console.log(typeof VDOM);
    // console.log(VDOM instanceof Object);
    /*
        关于虚拟DOM:
          1.本质是Object类型的对象(一般对象)
          2.虚拟DOM比较"轻",真实DOM比较"重",因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。
          3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上。
     */
  </script>

jsx语法规则

1.定义虚拟DOM时,不要写引号。

2.标签中混入JS表达式时要用{}。

3.样式的类名指定不要用class,要用className。

4.内联样式,要用style={{key:value}}的形式去写。(第一个花括号代表是要在里面写js代码,第二个花括号代表要在里面写属性对象)

5.JSX代码只有一个根标签

6.标签必须闭合

7.标签首字母

(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。

(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

JSX里面的标签最终会将其转化为html标签

javascript 复制代码
	<script type="text/babel" >
		const myId = 'aTgUiGu'
		const myData = 'HeLlo,rEaCt'

		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h2 className="title" id={myId.toLowerCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<h2 className="title" id={myId.toUpperCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<input type="text"/>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))

		/* 
				jsx语法规则:
						1.定义虚拟DOM时,不要写引号。
						2.标签中混入JS表达式时要用{}。
						3.样式的类名指定不要用class,要用className。
						4.内联样式,要用style={{key:value}}的形式去写。
						5.只有一个根标签
						6.标签必须闭合
						7.标签首字母
								(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
								(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

		 */
	</script>
相关推荐
耶啵奶膘35 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript