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脚本
Aug 04 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 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
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
JavaScript定时器详解及实例
2013/08/01 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
Python标准库itertools的使用方法
2020/01/17 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
通信专业个人自我鉴定
2013/10/21 职场文书
自考自我鉴定范文
2013/10/30 职场文书
班长岗位职责
2013/11/10 职场文书
业务部经理岗位职责
2014/01/04 职场文书
农村婚礼证婚词
2014/01/10 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
北京导游词
2015/02/12 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
电台广播稿范文
2015/08/19 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
数据库连接池
2021/04/06 MySQL
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技