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循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
angularjs中的单元测试实例
2014/12/06 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
2015/11/09 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python基于socket实现网络广播的方法
2015/04/29 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
python处理html转义字符的方法详解
2016/07/01 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
Django组件content-type使用方法详解
2019/07/19 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python安装whl文件过程图解
2020/02/18 Python
python算的上脚本语言吗
2020/06/22 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
最新党员的自我评价分享
2013/11/04 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
告知书格式
2015/07/01 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP