React 组件转 Vue 组件的命令写法


Posted in Javascript onFebruary 28, 2018

基于目前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

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

2. 组件自有状态

框架 说明
React 在初始化的时候,通过this.state = {xxx}来设置
Vue 通过data 返回函数来设置值,不同于react的state,vue是响应式

3. 生命周期

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

React 组件转 Vue 组件的命令写法React 组件转 Vue 组件的命令写法

4. 处理事件

框架 说明
React 相应的事件都加到了组件的实例方法上
Vue 设计上比较好,处理事件都加在一个methods对象下面,方便查找,更直观
// react
class FrontendMagazine {
  clickme () {
    // xxxx
  }
}
// vue
{
  name: 'frontend-magazine',
  methods: {
    clickme () {
      // xxx
    }
  }
}

5. 组件错误捕获

框架 说明
React componentDidCatch
Vue errorCaptured

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 组件的命令写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
分享五个有用的jquery小技巧
Oct 08 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
js自定义input文件上传样式
Oct 26 Javascript
小程序实现多列选择器
Feb 15 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 #Javascript
Vue中this.$router.push参数获取方法
Feb 27 #Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 #Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 #Javascript
angular json对象push到数组中的方法
Feb 27 #Javascript
angularjs实现table增加tr的方法
Feb 27 #Javascript
关于redux-saga中take使用方法详解
Feb 27 #Javascript
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
php微信公众号开发之简答题
2018/10/20 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
对Python 内建函数和保留字详解
2018/10/15 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python生成器与迭代器详解
2019/01/01 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
应聘护士自荐信
2013/10/21 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
平面设计师岗位职责
2014/09/18 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
2015年环卫工作总结
2015/04/28 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS