什么是JSX/TSX

作者：@ywjbalabala
本文为作者原创，转载请注明出处：https://www.cnblogs.com/ywjbalabala/p/17239832.html

---

什么是JSX/TSX？

JSX是JavaScript XML的简写，其实是函数调用和表达的语法糖，最终会转化为生成虚拟DOM 的js代码。而TSX是TypeScript XML的简写，是基于ts代码开发。

使用JSX/TSX优点？

• 写代码更快、提高开发效率
• 组件库代码比业务代码具有更强的动态性，可以很灵活地控制动态 DOM 片段
• 类型安全，在渲染之前会转义，防止注入攻击（XSS攻击）
• 可以利用 js/ts 来表达各种各样的逻辑，十分灵活
• 用 tsx 编写的组件，可以享受到 props 的类型提示
• 执行更快，因为它在编译为 JavaScript/typsScript代码后进行了优化

JSX/TSX写法注意点

1. @ 替换成 on，方法首字母大写；如：@click 改为 onCLick，onClick={() => this.fun()}；
2. v-bind:ceshi="值" 替换成 ceshi=
3. 不能使用if else语句，使用三元运算（conditional）替代
4. 不支持vue修饰符
5. 不支持$attrs和$listeners
6. render()中的注释要写在{}内
7. 允许模板中插入数组{arr}，数组会自动展开

 arr = [
        <h1>1</h1>,
        <h2>2</h2>,
      ]

8. 数组循环不用v-for，直接写this.fun(); 如select的option

<select>
  {this.renderOption(this.list, 'label', 'value')}
</select>
 
renderOption(data: any[], label: string, value: string) {
  return data.map((item) => <option label={item[label]} value={item[value]}></option>);
}

9、v-model: 使用value={this.value}

render() {
    return (
      <div class="input__wrap">
        <div>initValue的值:{this.value}</div>
        <el-input
          value={this.initValue}
          on-input={val => {
            this.initValue = val
          }}
        />
      </div>
    )
  }
}

render语法
props 、class、on(事件)、slots属性

  render(h) {
    return h(
      'div',
      {
        class: {
          default: true,
          first: this.type == 1,
          second: this.type == 2,
          third: this.type == 3
        },
        props:{
          value: this.value,
          type: 'border-card'
        }
        on: {
          click: this.onShowTypeClick
        }
      },
      [this.$slots.default, this.$slots.tag]
    )
  },
  methods: {
    onShowTypeClick() {
      console.log(this.type)
    }
  }

render函数的功能创建虚拟节点就是代替template所以 在.vue 文件中必须省略template标签