对的，JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
如下(JS写法)
var child1 = React.createElement('li', null, 'First Text Content')var child2 = React.createElement('li', null, 'Second Text Content')
var root = React.createElement('ul', { className: 'my-list' }, child1, child2)
等价于(JSX写法)
var root =(<ul className="my-list">
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
)
后者将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。另外，由于JSX只是一种语法，因此JavaScript的关键字class, for等也不能出现在XML中，而要如例子中所示，使用className, htmlFor代替，这和原生DOM在JavaScript中的创建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码来创建虚拟DOM。
return{...一堆事件处理函数}}()
AdmanageRE.Monitor=function()
{
//...一堆事件处理函数
}()
</script>
<body onload="AdmanageRE.Monitor.getaaa()" onmouseover="AdmanageRE.Monitor.MouseOver1(event)" onmousedown="AdmanageRE.Monitor.MouseClick1()" onkeydown="AdmanageRE.Monitor.MouseKeydown(event)">
<h3 onclick="AdmanageRE.Monitor.MouseClick2(event)" onmouseover="AdmanageRE.Monitor.MouseOver2()">baidu</h3>
createElement('anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
渲染成下面这样
<anchored-heading :level="1"><span>Hello</span> world!
</anchored-heading>
.使用jsx语法
这就是会用到一个Babel plugin 插件，用于在 Vue 中使用 JSX 语法的原因，它可以让我们回到于更接近模板的语法上。
安装
npm install\babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev
2.编辑.babelrc文件
{"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
代码编辑如下
Vue.component('jsx-example', {render (h) { // <-- h must be in scope
return <div id="foo">bar</div>
}
})
将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的，如果在作用域中 h 失去作用， 在应用中会触发报错。
官网说明文档：https://cn.vuejs.org/v2/guide/render-function.html#JSX
