前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 2x 中使用 render 和 jsx 的最佳实践 (1)

Vue 2x 中使用 render 和 jsx 的最佳实践 (1)

作者头像
默默的成长
发布2022-10-29 16:40:29
1K0
发布2022-10-29 16:40:29
举报
文章被收录于专栏:前端记录笔记前端记录笔记
image.png
image.png

什么是JSX

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

它的长相是这样的

代码语言:javascript
复制
let jsx = <h1>hello world</h1>;

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

嗯哼?

这就是JSX的功能了。

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

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

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

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

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

我们会有一个思考:

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

好的!

现在,让我们来看看Vue官方对渲染函数(Render)& JSX的介绍:

传送门

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

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

代码语言:javascript
复制
<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

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

代码语言:javascript
复制
<anchored-heading :level="1">Hello world!</anchored-heading>

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

代码语言:javascript
复制
<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>
代码语言:javascript
复制
Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

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

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

代码语言:javascript
复制
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 中。

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

不可否认,

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-08-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是JSX
  • JSX的具体使用场景和其优势特点
    • 为什么我们要抛弃Vue的优势和各种指令去使用JSX
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档