如何在Vue项目中使用JSX？
作者：ManStruggling什么是JSX？JSX是JavaScript和XML的组合，即JavaScript+XML=JSX。JSX起源于Facebook，XML可以用JavaScript编写。由于这个特性，它具有JavaScript的灵活性以及语义和直观性为什么要使用JSX？jsx比createElement函数更具可读性；
VSthis.$createElement('div',{...},[...])vue-cli3.0及以上默认支持jsx语法jsx可以让Vue组件更容易导入和管理。首先横向比较一下
模板语法、createElement函数、jsx三种渲染方式。栗子-template模板语法用得最多，不解释
spantextbtag createElementcreateElement函数实际上是创建一个VirtualNode，创建一个VNode树。Dom树一旦结构复杂，dom节点属性过多，势必造成可读性差。..render(h){returnh("div",{attrs:{id:"vnode",},},["sometext",h("p",{class:{bar:true,},style:{color:"red",fontWeight:"bold",},},"只有你能阻止森林火灾"),h("span",{},"spantext"),h("b",{domProps:{innerText:"b标签"}}),]);}JSX然后jsx闪耀render(){return(
sometext只有你能阻止森林大火跨度文本b标签 );}可能的同学感觉这和模板没什么区别。本案例只涉及html，不涉及javascript。jsx是把javascript和html放在一起写的。所以看下栗子。栗子2根据type的值进行条件渲染。有A、B、C三个模块，每个模块对应模块都有自己的代码，也有一些通用的模块。假设这些代码有很多行，势必会导致可读性下降。可能有人会想，如果是这样的话，不如把公共代码分离成一个单独的组件，这样就可以解决问题了。如果这里的公开代码只在本文件中使用，其他文件不会影响这些公开代码。对于代码引用，是否要考虑提取公共组件的必要性？jsx可以完美解决这些问题。模板，在模板
