江苏龙网

  1. 主页 > 生活百科 > >

竟然可以在一个项目中混用 Vue 和 React？( 二 )

vue

（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-combinedvuereact-combined 是一个用于 Vue和React快捷集成的工具包，并且适合复杂的集成场景 。通过这个工具，可以在任何的Vue和React项目中使用另一个类型框架的组件，并且解决了复杂的集成问题 。
vuera 开辟了Vue和React融合的想法，但是 vuera只能解决非常基础的组件融合，并且存在插槽(children)和数据变更后的渲染性能问题，因此无法用于复杂的场景以及生产环境 。
vuereact-combined 将融合做到了极致，支持了大部分的Vue和React组件的功能，并且在渲染更新上使用了和vuera不同的思路，完美解决了渲染性能问题

竟然可以在一个项目中混用 Vue 和 React？

文章插图
注意，该项目只支持使用 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？

文章插图
在 Vue 项目中引入 React 组件：
竟然可以在一个项目中混用 Vue 和 React？

文章插图
Github：https://github.com/devilwjp/vuereact-combined 。

【竟然可以在一个项目中混用 Vue 和 React？】


推荐阅读


上一篇：使用Docker构建轻量级Linux容器

下一篇：Malloc技术原理解析以及在转转搜索业务上的实践