教练,怎么在vue项目里写react?

2021年09月15日 阅读数:1
这篇文章主要向大家介绍教练,怎么在vue项目里写react?,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1.前言

我认可了我是标题党,本篇文章是在vue项目里写tsx的一篇介绍。做为一个reacter,目前的业务每天使用vue2+ts让我十分的不舒服。我对于vue也不是很熟悉,想回到个人react时代。因而在查询官网以后发如今vue里面写jsx也挺有意思的,遂记录。vue

2.正文

vue2+ts的项目配置这里就不展开了,网上一搜一大推。node

index.vue是页面路由,存放各个组件和公用逻辑。components文件夹中存放个人tsx组件。react

接下来就开始写tsx。app

你能够直接建立jsx/tsx文件async

此次的项目结构是这样的:函数

image.png

在vue文件里这么使用性能

// index.vue
<template>
  <div class="wrapper">
    <Common :opt="list" />
  </div>
</template>
 
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Common from "./components/Common";

@Component({
  name: "App",
  components: {
    Common,
  },
})
export default class App extends Vue {
  private list = ["我要去淘宝", "我要去百度", "我要去京东"];
}
</script>

tsx这么写this

import { CreateElement } from 'vue';
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'Common'
})
export default class Common extends Vue {
    @Prop(Object) opt!: any[]

    render(h: CreateElement) {
        return <span>
            {
                this.opt.map((it) => {
                    return <span style="marginRight:10px">{it}</span>
                })
            }
        </span>
    }
}

在来看一下页面spa

image.png

这该死的react既视感,竟是如此的诱人code

image.png

可能有心者注意到了 我还引用了一个CreateElement,这是干吗的呢。这玩意叫渲染函数。不喜欢读vue那么大串的文档的兄弟看这里。简单解释:这个东西能够渲染一个vnode节点。它比模板更接近编译器。什么意思呢?意思就是模板语法也会编译成渲染函数。因此咱们直接用渲染函数不就至关于节省了模板语法到渲染函数的过程。四舍五入项目性能又是一个大的提高!

简单介绍一下传参:

第一个参数: {String | Object | Function} 一个 HTML 标签名、组件选项对象,或者 resolve 了上述任何一种的一个 async 函数。必填项。

第二个参数: Object 一个与模板中 attribute 对应的数据对象。

第三个参数: {String | Array} 文本节点或子级虚拟节点 (VNodes)。

渲染函数给vue带来了不少的灵活性,之前你想自定义在子组件里插入东西,得写一大堆的插槽。<slot>。有了渲染函数咱们能够这么玩。

// 改造一下上面的index.vue的data

  private list = [
    { render: () => ["a", { style: { color: "red" } }, "我要去淘宝"] },
    { render: () => ["a", { style: { color: "green" } }, "我要去京东"] },
    { render: () => ["a", { style: { color: "pink" } }, "我要去百度"] },
  ];

tsx中这么写:

  {
                this.opt.map((it) => {
                    return h(...it.render())
                })
            }

就能够渲染出花里胡哨的页面了

image.png

咱们还能够这么玩:

// tsx改造
<span>
            {
                this.opt.map((it) => {
                    return it.render(h)
                })
            }
</span>


在index.vue页面咱们就能够这么玩:
// index.vue
private list = [
    {
      render: (h: CreateElement) =>
        h("a", { style: { color: "red", marginRight: "5px" } }, "我要去淘宝"),
    },
    {
      render: (h: CreateElement) =>
        h("a", { style: { color: "green", marginRight: "5px" } }, "我要去京东"),
    },
    {
      render: (h: CreateElement) =>
        h("a", { style: { color: "pink", marginRight: "5px" } }, "我要去百度"),
    },
  ];

结果也是一样的花哨

image.png

咱们一样能够渲染乱七八糟的标签!

// index.vue改造
 {
      render: (h: CreateElement) =>
        h(
          "h1",
          {
            style: { color: "green", marginRight: "5px" },
          },
          "我要去京东"
        ),
    },

咱们能够为所欲为的在渲染函数中定义事件:

// index.vue
private list = [
   {
      render: (h: CreateElement) =>
        h(
          "a",
          {
            style: { color: "red", marginRight: "5px" },
            on: {
              click: () => this.iWillGoWhere("TB"),
            },
          },
          "我要去淘宝"
        ),
   }]
   
 iWillGoWhere(type: string) {
    const goWhere: any = {
      TB: () => {
        alert("我要去淘宝!");
      },
      JD: () => {
        alert("我要去京东!");
      },
      BD: () => {
        alert("我要去百度!");
      },
    };
    goWhere[type]();
  }

这样就能够啦!

image.png

结尾

本次文章是对vue灵活性使用的入门。请各位vue大佬不要喷我~