如何在Vue项目中使用JSX?

Author:ManStruggling

什么是 JSX?


JSX是一种JavaScript和XML的结合,即JavaScript + XML = JSX,JSX源于Facebook,可以在JavaScript里写XML,因为这个特性,所以具备了JavaScript的灵活性,同时又兼具html的语义化和直观性

为什么使用 JSX?


  • jsx对比createElement函数可读性更强;
    VS this.$createElement('div', {...}, [...])
  • vue-cli3.0及以上默认支持jsx语法
  • jsx可以使vue组件更容易导入和管理

首先来横向对比一下模板语法、createElement函数、jsx三种渲染方式

栗子一

template模板语法
使用最多,不做解释
一些文本

Only you can stop forest fires

span text b tag
createElement
createElement函数实际上创建的是Virtual Node,创建VNode树,一旦Dom树的结构复杂,dom节点属性太多,势必会造成可读性差的问题。。。
render(h) {
    return h(
      "div",
      {
        attrs: {
          id: "vnode",
        },
      },
      [
        "一些文本",
        h(
          "p",
          {
            class: {
              bar: true,
            },
            style: {
              color: "red",
              fontWeight: "bold",
            },
          },
          "Only you can stop forest fires"
        ),
        h("span", {}, "span text"),
        h("b", { domProps: { innerText: "b tag" } }),
      ]
    );
  }
JSX
然后jsx就闪亮登场
render() {
    return (
      
一些文本

Only you can stop forest fires

span text b tag
); }

可能有的同学觉得,就这,跟template没什么区别呀。

这个案例只涉及到html没有涉及javascript,jsx是把javascript和html放在一起来书写的。所以看下个栗子

栗子二

根据type的值进行条件渲染,A、B、C三个模块,每个模块有自己的对应模块的代码,也有一些公共的模块,假设这些代码有很多行,势必会造成阅读性的降低。有人可能觉得如果这样的话,把公共代码抽离出一个单独的组件不就好了,这样使可以解决问题,如果这里的公共代码仅仅只在这一个文件内使用,别的文件不会对这些公共代码做引用呢,要不要考虑抽离公共组件的必要性呢,jsx就可以完美的解决这些问题。
template

,在template

...模块A的代码
...公共代码
...模块B的代码
...公共代码
...模块C的代码
...公共代码
createElement
这里就不做createElement函数的说明了,想必也没有多少人用这个吧。。。。有的话,那你赢了
JSX
template模板代码超过三百行,就很难阅读了,会重复在VM、V层切换,所以在复杂的大型项目中建议用jsx来做render,提高代码的可阅读性
render() {
    // 提取公共模块代码
    const renderCommon = () => 
...公共代码
; const renderA = () => (
...模块A的代码
{renderCommon()}
); const renderB = () => (
...模块B的代码
{renderCommon()}
); const renderC = () => (
...模块C的代码
{renderCommon()}
); return (
{this.type === 0 ? renderA() : this.type === 1 ? renderB() : renderC()}
); }

Usage


插槽和作用域插槽

// child.vue

组件直接引入使用,无需components注册,方便导入和管理


上述总结使用jsx的一些特殊情况,条件渲染、v-html、列表的渲染、事件的绑定、属性绑定、指令的使用、插槽和作用域插槽,聪明的你肯定可以看出来,使用jsx能像vue3的composition API一样把相同的逻辑代码聚合在一起,避免大型项目开发时,页面逻辑复杂导致代码量上升,option API在template和methods之间来回切换的问题。

第一次撰文,如有疑问,欢迎各位大佬斧正,希望大家能够STAR支持一下小编,希望小编的内容对大家有所帮助~

[TOC]

你可能感兴趣的