学习
实践
活动
专区
工具
TVP
写文章

前端神器:一行命令,React 组件转 Vue 组件!

基于目前React和Vue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面

简介

对于react-to-vue工具,转化的是基本的react component,而不是全部的react应用。而基本react component的定义更多是基于props和state来渲染的组件,其中也可以包括发请求。

本文先介绍两个框架的组件共性和不兼容的地方,再介绍react-to-vue的使用和原理。在实际业务中,陆金所100多个的react基础业务组件,react-to-vue可以转化90%以上,变成vue组件。

盘点两个框架的组件共性

1. props

2. 组件自有状态

3. 生命周期

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

4. 处理事件

5. 组件错误捕获

6. jsx语法

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

两个框架不兼容的地方

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

react-to-vue工具

安装及使用

原理步骤

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

如果文件是typescript,会去掉相应的ts描述

对ast进行遍历,首先提取propTypes和defaultProps

根据组件类型,处理函数组件和类组件

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

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

转化前后对比

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

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

结尾

项目地址: https://github.com/vicwang163/react-to-vue/, 欢迎各位大大来提bug,把项目越做越好

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180227B1G69N00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券