举例说明

<div id="test1"></div>
<div id="test2"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script>
  // 通过js创建虚拟dom
  const VDOM = React.createElement('h1',{id:'h1'},React.createElement('span',{},'我是h1标签下的span标签'))
  ReactDOM.render(VDOM, document.getElementById('test1'))
</script>
<script type="text/babel">
  // 通过jsx创建虚拟dom
  const VDOM2 = <h1 id='h1'><span>我是h1标签下的span标签</span></h1>
  ReactDOM.render(VDOM, document.getElementById('test2'))
</script>

通过上述例子可以看出

• 1.语法
  • 使用js创建虚拟dom

     React.creatElement(标签名(string)，标签属性(object), 标签间内容(stirng/function))
    

    • 若是标签嵌套，在创建时函数就要层层嵌套
  • 使用jsx创建虚拟dom
    • 类似与html标签
• 2.总结：在创建虚拟dom过程中，使用jsx语法非常简洁，而js语法则比较麻烦
• 3.本质：其实使用jsx创建虚拟dom的语法是使用js创建虚拟dom的语法的语法糖。
  • jsx语法创建虚拟dom在通过babel编译之后就是通过React.createElement语法来创建虚拟dom;