学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。大家可以去看哦，马上更新。