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学习笔记4 Eval函数
Jan 11 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
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&java(一)
2006/10/09 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
python生成验证码图片代码分享
2016/01/28 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
医院护士专业个人的求职信
2013/12/09 职场文书
求职意向书
2014/07/29 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
美容院合作经营协议书
2014/10/10 职场文书
交通事故协议书范文
2014/10/23 职场文书
现实表现材料范文
2014/12/23 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang