Vue 2x 中使用 render 和 jsx 的最佳实践 （1）

什么是JSX

最初，JSX 是React中所特有的，

它的长相是这样的

let jsx = <h1>hello world</h1>;

从表面上来看，这就是个普通的html标签。但是注意看左边，我们将这个 html 标签赋值给了一个 js 变量！

嗯哼？

这就是 JSX 的功能了。

JSX 的全称应该翻译为Javscript + xml（Javscript 中的 xml），而没有翻译成Javascript和xml，这是因为比起xml/html标签，这更像是在 javascript 中扩展了一个功能，它把 xml 当做变量的值赋给 js 变量，这是对 javascript 语法的延伸。

因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。

另外如果只考虑 JSX 的长相，我们也常常把它称之为jsx tag。

JSX的具体使用场景和其优势特点

为什么我们要抛弃Vue的优势和各种指令去使用JSX

我们会有一个思考：

函数组件，即简单的无状态组件，适合使用jsx，vue文件会很简洁。如果逻辑复杂了，使用vue但不用template，那就等于放弃了vue的优势：丰富的模板指令。还不如直接用react

好的！

现在，让我们来看看 Vue 官方对渲染函数（Render）& JSX的介绍：

传送门

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：

<h1>  <a name="hello-world" href="#hello-world">    Hello world!  </a></h1>

对于上面的 HTML，你决定这样定义组件接口：

<anchored-heading :level="1">Hello world!</anchored-heading>

当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现：

<script type="text/x-template" id="anchored-heading-template">  <h1 v-if="level === 1">    <slot></slot>  </h1>  <h2 v-else-if="level === 2">    <slot></slot>  </h2>  <h3 v-else-if="level === 3">    <slot></slot>  </h3>  <h4 v-else-if="level === 4">    <slot></slot>  </h4>  <h5 v-else-if="level === 5">    <slot></slot>  </h5>  <h6 v-else-if="level === 6">    <slot></slot>  </h6></script>

Vue.component('anchored-heading', {  template: '#anchored-heading-template',  props: {    level: {      type: Number,      required: true    }  }})

这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 <slot></slot>，在要插入锚点元素时还要再次重复。

虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：

Vue.component('anchored-heading', {  render: function (createElement) {    return createElement(      'h' + this.level,   // 标签名称      this.$slots.default // 子节点数组    )  },  props: {    level: {      type: Number,      required: true    }  }})

看起来简单多了！这样代码精简很多，但是需要非常熟悉 Vue 的实例 property。在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world!，这些子节点被存储在组件实例中的 $slots.default 中。

相信我！认真读完官方对于渲染函数 & JSX这块的介绍文档，你不会再有这个像小朋友一样有那么多问号~

不可否认，

vue 中大部分场景是不需要用 render 函数的，还是用模板更简洁直观.