（三）虚拟 DOM 的两种创建方式
# 🍈 一、使用 jsx 创建
<script type="text/babel">
// 1. 创建虚拟DOm - 此处不能写 '' 因为 jsx 可以和 js 混合写
const VDOM = <h1 id="title">Hell,react</h1>
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script># 🥭二、使用 js 创建，React.createElment
- 使用
React.createElment创建虚拟DOM就跟vue的h函数是一样的
<script type="text/javaScript">
// 1. 创建虚拟DOm
// const VDOM = React.createElment(标签名, 标签属性, 标签体内容)
const VDOM = React.createElement('h1', {id: 'title'}, 'Hello,React')
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script># 🥦三、为什么要使用 jsx 而不是使用 js
- 有的同学会说为什么不直接使用
js还要使用jsx呢还得去学习规则，那么下面这个案例就可以看出jsx的好处了 - 在上面的基础上，在
h1标签内部加一个span标签
# jsx 写法
<script type="text/babel">
// 1. 创建虚拟DOm - 此处不能写 '' 因为 jsx 可以和 js 混合写
const VDOM = (
<h1 id="title">
<span>Hell,react</span>
</h1>
)
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script># js 写法
<script type="text/javaScript">
// 1. 创建虚拟DOm
// const VDOM = React.createElment(标签名, 标签属性, 标签体内容)
const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Helo,React'))
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>看了上面的两个案例我想大家应该就知道为什么 React 要打造 jsx 了，因为他写模板就像我们写原生 html 一样，但是因为我们浏览器是不认识 jsx 的，最终还是会通过 babel 编译成 js 写的那样，所以说 jsx 是原生 js 创建虚拟 DOM 的语法糖
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年12月25日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号