关于前端:竟然可以在一个项目中混用-Vue-和-React

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