持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
创建虚拟DOM的两种方式
纯JS方式
在引入的react.development.js中，有一个API：createElement，用法示例：
React.createElement(标签名，标签属性，标签内容)
使用纯js的方式来创建虚拟DOM的话可以调用该API来进行实现，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react_by_javascript</title>
</head>
<body>
<!-- 测试容器 -->
<div id="test"></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">
const VDOM = React.createElement('h1', {id: 'body'}, 'JS build react DOM')
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
可以看到通过js的方式，我们也可以创建出React的虚拟DOM
JSX方式
JSX的方式来实现React的虚拟DOM则需要通过 babel 来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react_by_jsx</title>
</head>
<body>
<!-- 测试容器 -->
<div id="test"></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>
<!-- 加载 babel 用于将 jsx 转为 js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 设置类型为babel -->
<script type="text/babel">
const VDOM = <h1 id='body'>JSX build React DOM</h1>
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
两种方式创建嵌套标签的差异
当我们需要在DOM中实现嵌套标签时，例如：在<h1>标签中再嵌套一个<span>标签
JSX方式
JSX的方式我们可以直接在虚拟DOM对象中加上<span>标签就可以了。
...
<!-- 设置类型为babel -->
<script type="text/babel">
const VDOM = <h1 id='body'><span>JSX build React DOM</span></h1>
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
...
效果如下：
纯JS方式
而通过js的方式，在标签中加上<span>标签行不行呢？我们来试试看
...
<script type="text/javascript">
const VDOM = React.createElement('h1', {id: 'body'}, '<span>JS build react DOM</span>')
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
...
上面的效果图可以看到通过React.createElement()的方式，后面的标签内容并不支持标签，那么我们要实现对应的效果，就需要在里面再嵌套一个React.createElement()才行了，具体实现代码：
...
<script type="text/javascript">
// const VDOM = React.createElement('h1', {id: 'body'}, '<span>JS build react DOM</span>')
const VDOM = React.createElement('h1', {id: 'body'}, React.createElement('span', {}, 'JS build react DOM'))
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
...
效果如下：
通过上面的两个案例可以直观的感受到JSX的好处，让编码人家更便捷的来创建虚拟DOM。
