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 相关文章推荐
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
JS实现多选框的操作
Jun 24 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
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Django rest framework实现分页的示例
2018/05/24 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
火山动力Java笔试题
2014/06/26 面试题
大学生专业个人学习的自我评价
2013/10/26 职场文书
接受捐赠答谢词
2014/01/27 职场文书
组织鉴定材料
2014/06/02 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
2014年质检员工作总结
2014/11/18 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
党员转正意见怎么写
2015/06/03 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android