竟然可以在一個(gè)項(xiàng)目中混用 Vue 和 React？
Veaury
Veaury 是一個(gè)基于 React 和 Vue3 的工具庫(kù)，主要用于React和Vue在一個(gè)項(xiàng)目中公共使用的場(chǎng)景，主要運(yùn)用在項(xiàng)目遷移、技術(shù)棧融合的開(kāi)發(fā)模式、跨技術(shù)棧使用第三方組件的場(chǎng)景。
Veaury的特點(diǎn)如下：
- 同時(shí)支持Vue3和React，方便在一個(gè)項(xiàng)目中公共使用。
- 支持同一個(gè)應(yīng)用中出現(xiàn)的vue組件和react組件的context共享。
- 支持跨框架的hooks調(diào)用，可以在react組件中使用vue的hooks，也可以在vue組件中使用react的hooks。
- 可以解決React和Vue在公共使用時(shí)的代碼重復(fù)、冗余的問(wèn)題。
- 在一個(gè)應(yīng)用中可以隨意使用React或者Vue的第三方組件, 比如 antd, element-ui, vuetify。
- 提供了詳細(xì)的官方文檔，包括英文版和中文版。
Veaury 的文檔寫的非常詳細(xì)，這里就不再詳細(xì)介紹其使用方式了。需要注意的是，Veaury 并不支持 Vue 2，如果需要使用Vue 2，可以使用下面要介紹的工具庫(kù)。
Github：https://github.com/devilwjp/veaury。
Vuera
Vuera 是一個(gè)用于在 Vue 應(yīng)用中使用 React 組件的庫(kù)，同時(shí)也支持在 React 應(yīng)用中使用 Vue 組件。它提供了一種方便的方式，使開(kāi)發(fā)人員能夠在不同的框架之間無(wú)縫地使用對(duì)方的組件。
要在 Vue 應(yīng)用中使用React組件，可以按照以下步驟使用Vuera。
安裝插件
安裝Vuera：使用npm或yarn在您的Vue項(xiàng)目中安裝Vuera庫(kù)。
// 使用 yarn 安裝
yarn add vuera
// 使用 npm 安裝
npm i -S vuera安裝依賴。
由于需要在Vue中使用React組件，所以首先需要在項(xiàng)目中安裝 React，安裝指令如下：
npm install --save react react-dom項(xiàng)目配置
在babel.config.js文件中添加以下配置即可：
{
"presets": [
"react"
],
"plugins": [
"vuera/babel"
]
}接下來(lái)在項(xiàng)目中以插件的形式來(lái)引入并使用vuera庫(kù)，可以在 main.js 中加入如下代碼：
import { VuePlugin } from 'vuera'
Vue.use(VuePlugin)基本使用
完成上述配置之后，就可以在Vue項(xiàng)目中引入并使用React組件了。
React組件代碼如下：
import React from 'react'
function myReactComponent(props) {
const { message } = props
function childClickHandle() {
props.onMyEvent('React子組件傳遞的數(shù)據(jù)')
}
return (
<div>
<h2>{ message }</h2>
<button onClick={ childClickHandle }>向Vue項(xiàng)目傳遞React子組件的數(shù)據(jù)</button>
</div>
)
}
export default myReactComponentVue組件代碼如下：
<template>
<div>
<h1>I'm a Vue component</h1>
<my-react-component :message="message" @onMyEvent="parentClickHandle"/>
</div>
</template>
<script>
// 引入React組件
import MyReactComponent from './myReactComponent'
export default {
components: {
'my-react-component': MyReactComponent // 引入React組件
},
data() {
return {
message: 'Hello from React!',
}
},
methods: {
parentClickHandle(data){
console.log(data);
}
},
}
</script>在 Vue 項(xiàng)目中引入了這個(gè) React 組件，效果如下：
可以看到，這里實(shí)現(xiàn)了Vue到React組件的傳值，并顯示在了頁(yè)面上。根據(jù)右上角的Chrome插件顯示，這個(gè)項(xiàng)目中既使用了Vue又使用了React。
點(diǎn)擊頁(yè)面中的按鈕，可以看到，數(shù)據(jù)從React子組件傳遞到了Vue中：
這樣就簡(jiǎn)單實(shí)現(xiàn)了React和Vue組件之間的數(shù)據(jù)通信。
其他使用方式
如果不想通過(guò) Babel plugin 的方式引入的話，可以使用以下這兩種方法。
（1）使用wrapper組件
<template>
<div>
<react :component="component" :message="message" />
</div>
</template>
<script>
import { ReactWrapper } from 'vuera' // 引入vuera庫(kù)
import MyReactComponent from './MyReactComponent' // 引入react組件
export default {
data () {
component: MyReactComponent,
message: 'Hello from React!',
},
components: { react: ReactWrapper }
}
</script>（2）使用高階組件的API
<template>
<div>
<my-react-component :message="message" />
</div>
</template>
<script>
import { ReactWrapper } from 'vuera' // 引入vuera庫(kù)
import MyReactComponent from './MyReactComponent' // 引入react組件
export default {
data () {
message: 'Hello from React!',
},
components: { 'my-react-component': ReactInVue(MyReactComponent) }
}
</script>在 React 項(xiàng)目中使用 Vue 組件也是同理，可以參考官方文檔。
注意
Vuera 是一個(gè)比較成熟的 JavaScrip 庫(kù)，但是目前已經(jīng)不再維護(hù)（最近一次更新是三年前）。并且，該庫(kù)不支持 Vue 3，如果想要支持 Vue 3，可以使用 Vueury。
Github：https://github.com/akxcv/vuera。
#vuereact-combined
vuereact-combined 是一個(gè)用于 Vue和React快捷集成的工具包，并且適合復(fù)雜的集成場(chǎng)景。通過(guò)這個(gè)工具，可以在任何的Vue和React項(xiàng)目中使用另一個(gè)類型框架的組件，并且解決了復(fù)雜的集成問(wèn)題。
vuera 開(kāi)辟了Vue和React融合的想法，但是 vuera只能解決非常基礎(chǔ)的組件融合，并且存在插槽(children)和數(shù)據(jù)變更后的渲染性能問(wèn)題，因此無(wú)法用于復(fù)雜的場(chǎng)景以及生產(chǎn)環(huán)境。
vuereact-combined 將融合做到了極致，支持了大部分的Vue和React組件的功能，并且在渲染更新上使用了和vuera不同的思路，完美解決了渲染性能問(wèn)題
注意，該項(xiàng)目只支持使用 Vue 2，如果想要使用 Vue 3，可以使用上面的介紹的 Veaury。
使用vuereact-combined的步驟如下。
#安裝插件
在項(xiàng)目中安裝vuereact-combined：
npm install --save vuereact-combined項(xiàng)目配置
在Vue和React的入口文件中引入 vuereact-combined：
import Vue from 'vue';
import React from 'react';
import {Combined} from 'vuereact-combined';
Vue.use(Combined);配置Babel以支持JSX語(yǔ)法和Vue.js的特性。安裝babel-plugin-transform-vue-jsx和babel-preset-react，并在.babelrc文件中添加相應(yīng)的配置：
{
"presets": ["react-app"],
"plugins": ["@vue/babel-plugin-transform-vue-jsx"]
}在webpack配置文件中添加相應(yīng)的loader和plugin：
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = function(webpackEnv) {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules\/(?!(vue|@vue\/.*)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-vue-jsx']
}
}
},
// 其他規(guī)則...
],
},
plugins: [
new VueLoaderPlugin(),
// 其他插件...
],
};配置完畢后，就可以在Vue和React之間進(jìn)行快捷的集成了。
基本使用
假設(shè)有一個(gè)React組件，它是一個(gè)簡(jiǎn)單的函數(shù)組件：
// 來(lái)自React項(xiàng)目的組件
const MyReactComponent = () => {
return <div>Hello React!</div>;
};可以在Vue項(xiàng)目中引入并使用這個(gè)組件。下面是一個(gè)使用vuereact-combined的Vue文件示例：
<template>
<div>
<MyReactComponent />
</div>
</template>
<script>
import {Combined} from 'vuereact-combined';
import MyReactComponent from './MyReactComponent'; // 引入React組件
export default {
components: {
Combined,
MyReactComponent // 將React組件注冊(cè)為Vue組件
},
// 其他Vue代碼...
};
</script>這里，首先引入了MyReactComponent，然后在Vue組件中使用它。通過(guò)將React組件注冊(cè)為Vue組件，我們可以在Vue模板中使用它，就像使用普通的Vue組件一樣。
這里只展示了最基本的使用方法，其他使用場(chǎng)景可以參考官方文檔。
注意事項(xiàng)
- 在Vue項(xiàng)目中使用第三方的React組件：第三方的react組件已經(jīng)是通過(guò)babel進(jìn)行過(guò)處理，不包含 React 的 jsx。此情況下，可以直接在項(xiàng)目中使用applyReactInVue對(duì)第三方的 React 組件進(jìn)行處理。
- 在React項(xiàng)目中使用第三方的Vue組件：第三方的Vue組件已經(jīng)是通過(guò)vue-loader和babel進(jìn)行過(guò)處理，不包含.vue文件以及Vue的jsx。此情況下，可以直接在項(xiàng)目中使用applyVueInReact對(duì)第三方的Vue組件進(jìn)行處理。
在 React 項(xiàng)目中引入Vue組件的支持程度：
在 Vue 項(xiàng)目中引入 React 組件：
Github：https://github.com/devilwjp/vuereact-combined。
