React项目中使用Vue或者在Vue项目中使用React

132次阅读

React和Vue是前端开发中的两大热门框架，各自都有着强大的功能和丰富的生态系统。也行你正在寻求一种可以在React项目中使用Vue或者在Vue项目中使用React的方案（听起来似乎没这个必要，但项目的实际情况往往有些出乎意料~~），不妨试试开源项目 Veaury 。

Veaury

Veaury 是基于React和Vue3的工具库，用于在React项目中使用Vue或者在Vue项目中使用React，主要运用在项目迁移、技术栈融合的开发模式、跨技术栈使用第三方组件的场景。

https://github.com/gloriasoft/veaury

如果是Vue2，可以使用同一开发者的另外一个项目。

https://github.com/gloriasoft/vuereact-combined

功能特点

同时支持Vue3和React，方便在一个项目中公共使用；
支持同一个应用中出现的vue组件和react组件的context共享；
支持跨框架的hooks调用，可以在react组件中使用vue的hooks，也可以在vue组件中使用react的hooks；
可以解决React和Vue在公共使用时的代码重复、冗余的问题。
在一个应用中可以随意使用React或者Vue的第三方组件, 比如 antd, element-ui, vuetify。
提供了详细的官方文档，包括英文版和中文版。

安装

# Install with yarn:
$ yarn add veaury
# or with npm:
$ npm i veaury -S

用法

在React组件中使用Vue组件 – 基本用法

import {applyVueInReact, applyPureVueInReact} from 'veaury'
// This is a Vue component
import BasicVueComponent from './Basic.vue'
import {useState} from 'react'
// Use HOC 'applyVueInReact'
const BasicWithNormal = applyVueInReact(BasicVueComponent)
// Use HOC 'applyPureVueInReact'
const BasicWithPure = applyPureVueInReact(BasicVueComponent)
export default function () {
  const [foo] = useState('Hello!')
  return <>
    <BasicWithNormal foo={foo}>
      <div>
        the default slot
      </div>
    </BasicWithNormal>
    <BasicWithPure foo={foo}>
      <div>
        the default slot
      </div>
    </BasicWithPure>
  </>
}

在Vue组件中使用React组件 – 基本用法


<template>
  <BasicPure :foo="foo">
    <div>
      children内容
    </div>
  </BasicPure>
</template>
<script>
import {applyReactInVue, applyPureReactInVue} from 'veaury'
// 这是一个React组件
import BasicReactComponent from './react_app/Basic.jsx'
import {ref} from 'vue'

export default {
  components: {
    // 使用高阶组件 'applyReactInVue'
    Basic: applyReactInVue(BasicReactComponent),
    // 现在推荐使用纯净模式的 'applyPureReactInVue'
    BasicPure: applyPureReactInVue(BasicReactComponent)
  },
  setup() {
    return {
      foo: ref('Hello!')
    }
  }
}
</script>

在React组件中使用Vue组件 – 事件的用法

import {applyVueInReact} from 'veaury'
import BasicVue from './Basic.vue'
import {useState} from 'react'

const Basic = applyVueInReact(BasicVue)
export default function () {
  function onClickForVue() {
    console.log('clicked!')
  }

  return <div>
    {/*在Vue组件Basic中可以使用$emit('click')触发这个事件绑定的函数*/}
    <Basic onClick={onClickForVue}/>
  </div>
}

在Vue组件中使用React组件 – 事件的用法


<template>
  <!-- 在React组件ReactButton中可以使用props.onClick()触发这个事件绑定的函数 -->
  <ReactButton @click="onClickForReact"/>
</template>

<script>
import {applyPureReactInVue} from 'veaury'
// React组件ReactButton
import ReactButton from "./react_app/Button.jsx"

export default {
  components: {
    ReactButton: applyPureReactInVue(ReactButton)
  },
  setup() {
    function onClickForReact() {
      console.log('clicked!')
    }

    return {
      onClickForReact,
    }
  }
}
</script>

更多配置和用法参考项目文档，基本上能想到的场景和用法都能够很好的支持。

正文完