react 两种方式创建 dom
上一篇博文我们使用 jsx 创建渲染了 DOM 元素在页面上渲染，其实不使用 jsx ，使用 js 也是可以创建的，但是写法稍有不同，这一篇博文就稍微说一下区别，以及为啥使用 jsx 而不是使用 js 开发的原因。
使用 jsx 创建 dom
这个就是我们上一篇博文最后案例写的内容，具体就不说了，直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用jsx创建dom</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持 react 操作 dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入 label，用于将 jsx 转化为 js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 此处必须写 text/babel -->
<script type="text/babel">
// 1. 创建虚拟dom
const VDOM = <h1>我是𝒆𝒅.</h1> // 此处一定不要写双引号，因为不是字符串。
// const VDOM1 = <h1>我今年10岁了</h1> // 此处一定不要写双引号，因为不是字符串。
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("app"))
// ReactDOM.render(VDOM1, document.getElementById("app"))
</script>
</body>
</html>
保存刷新，查看效果。
使用 js 创建 dom
这个和 jsx 写法稍有不同，也不详细说了，直接上代码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用js创建dom</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持 react 操作 dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript">
// 1. 创建虚拟dom
// const VDOM = React.createElement(标签名，标签属性，标签内容)
const VDOM = React.createElement('h1', {id: 'user'}, '我是𝒆𝒅.')
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("app"))
</script>
</body>
</html>
保存刷新，查看代码效果！
通过上面两个对比，我们发现，不管使用 jsx 还是 js 创建渲染的 dom 都是一样的，那为啥还要用 jsx 而不是 js 创建渲染 dom 呢？这个是有原因的，为啥呢？下面说一下。
修改渲染需求
上面对比的案例都是渲染一个标签对吧？我们改一下，我们不在 h1 标签里面包裹信息，我们在 h1 标签里面嵌套一个 span 标签，在 span 标签里面包裹信息，这个需求简单吧？我们把上面的代码改造一下子看效果。
jsx 改造很简单：
<!-- 此处必须写 text/babel -->
<script type="text/babel">
// 1. 创建虚拟dom
const VDOM = <h1 id="user"> <span>我是𝒆𝒅.</span> </h1> // 此处一定不要写双引号，因为不是字符串。
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("app"))
</script>
这样就改造完成了！h1 里面嵌套一个 span 标签，数据信息在 span 标签中。保存刷新看效果。
看效果是没有问题的，完全实现了我们预期的效果。
接下来我们改造 js 渲染方式，也很简单，无非是在内容里面加一个 span 标签。
<script type="text/javascript">
// 1. 创建虚拟dom
// const VDOM = React.createElement(标签名，标签属性，标签内容)
const VDOM = React.createElement('h1', {id: 'user'}, '<span>我是𝒆𝒅.</span>')
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("app"))
</script>
好的，改造完成，保存刷新看效果。
好的，看效果，不说了，此处无声胜有声~
有宝子说，我就不用 jsx ，就用 js 怎么办？可以，无线套娃！
<script type="text/javascript">
// 1. 创建虚拟dom
const VDOM = React.createElement('h1', {id: 'user'}, React.createElement('span', {id: 'user'}, '我是𝒆𝒅.'))
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("app"))
</script>
保存刷新看效果！
这样也是可以的，那这是我们自己模拟的一个需求，假设有一个实际需求，嵌套四层，五层，六层... 怎么办？可以一层一层创建新的，但是这样子，是不是有些许的瑕疵？
很明显，jsx 的优势就体现出来了。
总结一下 jsx 的优势：
原因就是 js 创建虚拟 dom 可能会遇到很繁琐的情况，jsx 的出现，就是解决 dom 创建繁琐问题，可以是开发人员快速的实现开发工作。
其实还有一个小问题想说一下，就是我们使用 jsx 开发的时候，我们发现我们写的代码都在一行上，谁家开发的代码都写在一行啊，那肯定是有瑕疵的，所以说他有一个写法可以更好的优化我们的代码，看下面代码。
<!-- 此处必须写 text/babel -->
<script type="text/babel">
// 1. 创建虚拟dom
const VDOM = (
<h1 id="user">
<span>我是𝒆𝒅.</span>
</h1>) // 此处一定不要写双引号，因为不是字符串。
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("app"))
</script>
我们可以把 jsx 代码用 小括号 包裹起来，这样的话，我们就可以像写普通的 html 代码一样编写我们的 dom 了。所以说一比较，jsx 是不是超级香？啊哈哈哈哈哈！！
原理哈，其实呢，我们使用 jsx 的写法，最后怎么渲染到浏览器上去的呢？毕竟浏览器没法识别 jsx 语法，其实尽管我们写的是 jsx 语法，但是最后还是通过 babel 翻译成 js 的语法交给浏览器处理的，那原理不一样吗？还是 js，对的，不否认，关键是我们没写那么复杂的 js 啊！ 啊哈哈哈哈，babel 翻译成啥我不管，反正我省事，啊哈哈哈哈哈！臭不要脸！！
简单点说 jsx 就是 js 的语法糖！
好了，这篇博客也要结束了，以后开发就是用 jsx 就可以了，js 稍微了解一下就行！
OK，今天就到这儿！下篇博客见！拜了个拜！
【本篇博文相关代码资料】：我是𝒆𝒅. 的 gitee
