1.前言
听说vue3支持了jsx的语法，所以想试试看，好用不好用，跟react的写法有何区别。

2.template与jsx
Vue的主流做法是基于template的，通过对模板的渲染，达到页面的展示效果。react是用jsx的写法。传统的服务端渲染，有很多基于模板引擎的方案，比如jade，这种都是预选把值处理好，在渲染的时候填充进模板。而jsx是直接同步输出的。

3.环境

• @vue/cli:4.5.0
• vue:3.0.0
• ant-design-vue:2.2.8
  
  

4.创建工程
我们基于vue-cli创建一个工程，然后可以看到启动后的默认页面，基于当前环境，写一个jsx的组件
TestJsx

import {defineComponent} from "vue";

const TestJsx = defineComponent({
    setup() {
        return () => <>
            <div>JSX test</div>
        </>
    }
})
export default TestJsx

在HelloWorld组件中引入

import TestJsx from "./TestJsx"
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    TestJsx
  }
}

可以看到组件被正常渲染

5.jsx组件中，引入组件库中的组件
这里以ant-design-vue为例，按需加载的配置就不赘述了。可以参考 https://www.ithere.net/article/431

import {defineComponent, ref} from "vue";
import {Button} from "ant-design-vue";
import {Input} from "ant-design-vue/es";

const TestJsx = defineComponent({
    setup() {
        const val = ref('this is a input');
        const handleInputChange = (e)=>{ val.value = e.target.value }
        const handleClick = ()=>{
            alert("this is a button")
        }

        return () => <>
            <div>JSX test</div>
            <Button type="primary" ghost onClick={handleClick}>Button</Button>
            <Input value={val} onChange={handleInputChange}/>
        </>
    }
})
export default TestJsx

jsx的写法基本就与react很类似了。

结果可以看到，组件被正常引用，并且，事件可以触发。

6.jsx中引入工程中的template的组件和jsx的组件
A.jsx

import {defineComponent} from "vue";

const A = defineComponent(()=>{
    return ()=><div>A Component</div>
})
export default A

B.vue

<template>
  <div>
    B Component
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
</style>

TestJsx.jsx

import {defineComponent, ref} from "vue";
import A from "./A";
import B from "./B";
import {Button} from "ant-design-vue";
import {Input} from "ant-design-vue/es";

const TestJsx = defineComponent({
    components: {
        B
    },
    setup() {
        const val = ref('this is a input');
        const handleInputChange = (e)=>{ val.value = e.target.value }
        const handleClick = ()=>{
            alert("this is a button")
        }

        return () => <>
            <div>JSX test</div>
            <Button type="primary" ghost onClick={handleClick}>Button</Button>
            <Input value={val} onChange={handleInputChange}/>
            <A/>
            <B/>
        </>
    }
})
export default TestJsx

运行效果如下

通过demo可以看出，在vue3下，我们可以自由的选择templet或者jsx的方式去进行开发，并且可以根据情况进行混合开发。这种可以方便react的前端兄弟，在开发vue的时候不会感觉别扭。不过从工程角度看既然vue一直是template模式，那么如果没有特殊需要，倒也不需要特地去改变。最大的好处，大概就是在按需加载的时候，不需要一个个的去单独注册组件了。