如何将React 组件转换成Vue 组件

这篇文章主要介绍了如何将React 组件转换成Vue 组件，此处通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，需要的朋友可以参考下：

vue是什么软件

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

盘点两个框架的组件共性

1. props

// react
FrontendMagazine.propTypes = {
  name: PropTypes.string
}
FrontendMagazine.defaultProps = {
  name: 'FrontendMagazine'
}
// vue
{
  name: 'frontend-magazine',
  props: {
    name: {
      type: String,
      default: 'FrontendMagazine'
    }
  }
}

2. 组件自有状态

3. 生命周期

虽然生命周期名不一样，但是差不多有对应的

4. 处理事件

// react
class FrontendMagazine {
  clickme () {
    // xxxx
  }
}
// vue
{
  name: 'frontend-magazine',
  methods: {
    clickme () {
      // xxx
    }
  }
}

5. 组件错误捕获

6. jsx语法

react是基于jsx来写的，对于vue来说，虽然在好多场景下，可以使用template来写，但是vue也完全支持jsx语法的，对于本工具，也只是把react的jsx语法转换成vue支持的jsx

两个框架不兼容的地方

react在最新版本里面，有flagments的支持，允许根节点返回多个节点，目前没有看到vue支持的，还有就是在设计react组件的时候，使用了高阶，对于本工具，也是不支持的

react-to-vue工具

安装及使用

# install
npm install -g react-to-vue
# usage
Usage: rtv [options] file(react component)

Options:

 -V, --version     output the version number
 -o --output [string] the output file name
 -t --ts        it is a typescript component
 -h, --help      output usage information

 # demo

 rtv demo.js

原理步骤

1. 对于输入的文件首先使用babylon来解析，生成ast

2. 如果文件是typescript，会去掉相应的ts描述

3. 对ast进行遍历，首先提取propTypes和defaultProps

4. 根据组件类型，处理函数组件和类组件

5. 在类组件里面，需要转换生命周期，state等信息

6. 最后根据提取到的信息拼接成vue组件，通过prettier-eslint来美化

转化前后对比

如何同时写开源的react和vue组件

如果你的组件想要被大家开源使用，作者这里有一个小提议，可以边写react组件，边试着转化成vue组件，如果转化有问题，试着改代码，尽可能跨框架支持，这样你写的组件肯定可以在react和vue项目中同时使用。

到此这篇关于如何将React 组件转换成Vue 组件的文章就介绍到这了,更多相关如何将React 组件转换成Vue 组件的内容请搜索亿速云以前的文章或继续浏览下面的相关文章希望大家以后多多支持亿速云！