前端转换神器react-to-vue

近年来，前端技术不断火热，尤其以React和Vue技术最为火爆，这两个前端框架也是目前国内使用得最多的两个框架。虽然，在使用的广度上React虐胜一筹，但Vue框架的发展趋势也不容小觑，特别是去年React的MIT风波，越来越大的企业开始将目光转向了Vue。那么有没有一款软件或者工具可以实现两个框架之间组件的可复用呢？答案是有的，react-to-vue就是这么一款不错的工具软件。

简介

对于react-to-vue工具，转化的是基本的react component，而不是全部的react应用。而基本react component的定义更多是基于props和state来渲染的组件，其中也可以包括发请求。 本文先介绍两个框架的组件共性和不兼容的地方，再介绍react-to-vue的使用和原理。在实际业务中，陆金所100多个的react基础业务组件，react-to-vue可以转化90%以上，变成vue组件。

react与vue组件共性

下面通过对比来认识一下react与vue组件的共性。

props

下面是一个具体的使用实例：

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

组件状态

生命周期对比

虽然两个框架的生命周期名不一样，但是差不多都是有对应关系的。 React生命周期

这里写图片描述

Vue生命周期

这里写图片描述

事件处理

// react
class FrontendMagazine {
    clickme () {
        // xxxx
    }
}

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

异常捕获

两个框架在捕捉异常方面的实现策略相似，只是实现的函数不一样。

jsx语法

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

两个框架不兼容的地方

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

react-to-vue介绍

react-to-vue是一款可以把 React 组件转为 Vue 组件的工具，并且支持 TypeScript 语法解析。使用有以下几步：

安装及使用

# 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来美化。

转换前后对比

这里写图片描述

总结

项目地址： https://github.com/vicwang163/react-to-vue/