学Vue，就要学会vue JSX（一）

最近在做一个项目，然后里面也用到了jsx。因为其实有一些功能也需要更加灵活的去处理。

介绍一下JSX

JSX 简介

JSX是一种Javascript的语法扩展，JSX = Javascript + XML，即在Javascript里面写XML，因为JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具html的语义化和直观性。

应用场景

为了让大家更方便的去理解JSX的作用及用法，我先为大家罗列了几个可能会用到JSX的应用场景。

在消息框内添加html

在开发过程中，经常会用到消息框，使用消息框可能的一种写法是这样的

Message.alert({
  messge: '确定要删除?',
  type: 'warning'
})

但是有时候产品或UI希望message可以自定义一些样式，这时候你可能就需要让Message.alert支持JSX了（当然也可以使用插槽/html等方式解决）

Message.alert({
  // 此处使用了JSX
  messge: <div>确定要删除<span style="color:red">学习子君Vue系列文章</span>的笔记?</div>,
  type: 'warning'
})

函数式组件

虽然在Vue.2.5之后，函数式组件也可以使用模板语法,但使用JSX可能会更方便一些（个人理解）

export default {
  // 通过配置functional属性指定组件为函数式组件
  functional: true,
  /**
   * 渲染函数
   * @param {*} h
   * @param {*} context 函数式组件没有this, props, slots等都在context上面挂着
   */
  render(h, context) {
    const { props } = context
    if (props.avatar) {
      return <img src={props.avatar}></img>
    }
    return <img src="default-avatar.png"></img>
  }
}

一个表单的需求

为了方便快速开发管理系统，我对所使用的UI库中的表单进行了二次封装，封装之后的效果如下（仅供参考）:

<template>
  <custom-form v-model="formData" :fields="fields" />
</template>
<script>
export default {
  data() {
    return {
      formData: {},
      fields: Object.freeze([
        {
          label: '字段1',
          props: 'field1',
          type: 'input'
        },
        {
          label: '字段2',
          props: 'field2',
          type: 'number'
        }
      ])
    }
  }
}
</script>

这样封装之后，定义表单时，只需要定义简单的JSON即可快速完成表单开发，但有时候会有一些特殊的需求，比如希望可以给输入框后面加一个按钮或者图标之类的，这时候就需要考虑使用JSX去处理了

{
  label: '字段2',
  props: 'field2',
  type: 'number',
  // 会渲染到表单元素后面
  renderSuffix() {
    return <button onClick={this.$_handleSelect}>选择</button>
  }
}

其他一些场景

比如我们一条数据需要根据状态不同，定义不同的展现方式，这时候你可能会想到用策略模式，这时候如果将每一个策略都写成一个JSX,那么就不需要针对每一个策略定义一个单文件组件了。当然如果你说，我就喜欢用JSX，那么所有的场景你都可以用。

这篇文章先说到这里，下一篇文章继续说这个知识点。下一部分说：学习JSX，先了解一下createElement。大家可以去看哦，马上更新。