共计 4786 个字符，预计需要花费 12 分钟才能阅读完成。
React 和 Vue 是前端开发中的两大热门框架，各自都有着弱小的性能和丰盛的生态系统。然而，你有没有想过，在一个我的项目中同时应用 React 和 Vue？是的，你没有听错，能够在同一个我的项目中混用这两个框架！本文就来分享 3 个用于混合应用 React 和 Vue 的工具！
Veaury
Veaury 是一个基于 React 和 Vue3 的工具库，次要用于 React 和 Vue 在一个我的项目中公共应用的场景，次要使用在我的项目迁徙、技术栈交融的开发模式、跨技术栈应用第三方组件的场景。
Veaury 的特点如下：
- 同时反对 Vue3 和 React，不便在一个我的项目中公共应用；
- 反对同一个利用中呈现的 vue 组件和 react 组件的 context 共享；
- 反对跨框架的 hooks 调用，能够在 react 组件中应用 vue 的 hooks，也能够在 vue 组件中应用 react 的 hooks；
- 能够解决 React 和 Vue 在公共应用时的代码反复、冗余的问题。
- 在一个利用中能够随便应用 React 或者 Vue 的第三方组件, 比方 antd, element-ui, vuetify。
- 提供了具体的官网文档，包含英文版和中文版。
Veaury 的文档写的十分具体，这里就不再具体介绍其应用形式了。须要留神的是，Veaury 并不反对 Vue 2，如果须要应用 Vue 2，能够应用上面要介绍的工具库。
Github：https://github.com/devilwjp/veaury
Vuera
Vuera 是一个用于在 Vue 利用中应用 React 组件的库，同时也反对在 React 利用中应用 Vue 组件。它提供了一种不便的形式，使开发人员可能在不同的框架之间无缝地应用对方的组件。
要在 Vue 利用中应用 React 组件，能够依照以下步骤应用 Vuera。
装置插件
- 装置 Vuera：应用 npm 或 yarn 在您的 Vue 我的项目中装置 Vuera 库。
// 应用 yarn 装置
yarn add vuera
// 应用 npm 装置
npm i -S vuera
- 装置依赖
因为须要在 Vue 中应用 React 组件，所以首先须要在我的项目中装置 React，装置指令如下：
npm install --save react react-dom
我的项目配置
在 babel.config.js 文件中增加以下配置即可：
{
"presets": ["react"],
"plugins": ["vuera/babel"]
}
接下来在我的项目中以插件的模式来引入并应用 vuera 库，能够在 main.js 中退出如下代码：
import {VuePlugin} from 'vuera'
Vue.use(VuePlugin)
根本应用
实现上述配置之后，就能够在 Vue 我的项目中引入并应用 React 组件了。
React 组件代码如下：
import React from 'react'
function myReactComponent(props) {const { message} = props
function childClickHandle() {props.onMyEvent('React 子组件传递的数据')
}
return (
<div>
<h2>{message}</h2>
<button onClick={childClickHandle}> 向 Vue 我的项目传递 React 子组件的数据 </button>
</div>
)
}
export default myReactComponent
Vue 组件代码如下：
<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 我的项目中引入了这个 React 组件，成果如下：
能够看到，这里实现了 Vue 到 React 组件的传值，并显示在了页面上。依据右上角的 Chrome 插件显示，这个我的项目中既应用了 Vue 又应用了 React。
点击页面中的按钮，能够看到，数据从 React 子组件传递到了 Vue 中：
这样就简略实现了 React 和 Vue 组件之间的数据通信。
其余应用形式
如果不想通过 Babel plugin 的形式引入的话，能够应用以下这两种办法。（1）应用 wrapper 组件
<template>
<div>
<react :component="component" :message="message" />
</div>
</template>
<script>
import {ReactWrapper} from 'vuera' // 引入 vuera 库
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 库
import MyReactComponent from './MyReactComponent' // 引入 react 组件
export default {data () {message: 'Hello from React!',},
components: {'my-react-component': ReactInVue(MyReactComponent) }
}
</script>
在 React 我的项目中应用 Vue 组件也是同理，能够参考官网文档。
留神
Vuera 是一个比拟成熟的 JavaScrip 库，然而目前曾经不再保护（最近一次更新是三年前）。并且，该库不反对 Vue 3，如果想要反对 Vue 3，能够应用 Vueury。
Github：https://github.com/akxcv/vuera
vuereact-combined
vuereact-combined 是一个用于 Vue 和 React 快捷集成的工具包，并且适宜简单的集成场景。通过这个工具，能够在任何的 Vue 和 React 我的项目中应用另一个类型框架的组件，并且解决了简单的集成问题。
vuera 开拓了 Vue 和 React 交融的想法，然而 vuera 只能解决十分根底的组件交融，并且存在插槽 (children) 和数据变更后的渲染性能问题，因而无奈用于简单的场景以及生产环境。
vuereact-combined 将交融做到了极致，反对了大部分的 Vue 和 React 组件的性能，并且在渲染更新上应用了和 vuera 不同的思路，完满解决了渲染性能问题
留神，该我的项目只反对应用 Vue 2，如果想要应用 Vue 3，能够应用下面的介绍的 Veaury。
应用 vuereact-combined 的步骤如下。
装置插件
在我的项目中装置 vuereact-combined：
npm install --save vuereact-combined
我的项目配置
在 Vue 和 React 的入口文件中引入 vuereact-combined：
import Vue from 'vue';
import React from 'react';
import {Combined} from 'vuereact-combined';
Vue.use(Combined);
配置 Babel 以反对 JSX 语法和 Vue.js 的个性。装置 babel-plugin-transform-vue-jsx 和babel-preset-react，并在 .babelrc 文件中增加相应的配置：
{"presets": ["react-app"],
"plugins": ["@vue/babel-plugin-transform-vue-jsx"]
}
在 webpack 配置文件中增加相应的 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']
}
}
},
// 其余规定...
],
},
plugins: [new VueLoaderPlugin(),
// 其余插件...
],
};
配置结束后，就能够在 Vue 和 React 之间进行快捷的集成了。
根本应用
假如有一个 React 组件，它是一个简略的函数组件：
// 来自 React 我的项目的组件
const MyReactComponent = () => {return <div>Hello React!</div>;};
能够在 Vue 我的项目中引入并应用这个组件。上面是一个应用 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 组件注册为 Vue 组件
},
// 其余 Vue 代码...
};
</script>
这里，首先引入了MyReactComponent，而后在 Vue 组件中应用它。通过将 React 组件注册为 Vue 组件，咱们能够在 Vue 模板中应用它，就像应用一般的 Vue 组件一样。
这里只展现了最根本的应用办法，其余应用场景能够参考官网文档。
注意事项
- 在 Vue 我的项目中应用第三方的 React 组件：第三方的 react 组件曾经是通过 babel 进行过解决，不蕴含 React 的 jsx。此状况下，能够间接在我的项目中应用 applyReactInVue 对第三方的 React 组件进行解决。
- 在 React 我的项目中应用第三方的 Vue 组件：第三方的 Vue 组件曾经是通过 vue-loader 和 babel 进行过解决，不蕴含.vue 文件以及 Vue 的 jsx。此状况下，能够间接在我的项目中应用 applyVueInReact 对第三方的 Vue 组件进行解决。
在 React 我的项目中引入 Vue 组件的反对水平：
在 Vue 我的项目中引入 React 组件：
Github： https://github.com/devilwjp/vuereact-combined
