React组件怎么转Vue组件
本篇内容主要讲解“React组件怎么转Vue组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React组件怎么转Vue组件”吧!
创新互联专注于中大型企业的成都做网站、网站制作、成都外贸网站建设和网站改版、网站营销服务,追求商业策划与数据分析、创意艺术与技术开发的融合,累计客户千余家,服务满意度达97%。帮助广大客户顺利对接上互联网浪潮,准确优选出符合自己需要的互联网运用,我们将一直专注高端网站设计和互联网程序开发,在前进的路上,与客户一起成长!
简介
对于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. 组件自有状态
3. 生命周期
虽然生命周期名不一样,但是差不多有对应的
4. 处理事件
// react class FrontendMagazine { clickme () { // xxxx } } // vue { name: 'frontend-magazine', methods: { clickme () { // xxx } } }
5. 组件错误捕获
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
原理步骤
对于输入的文件首先使用babylon来解析,生成ast
如果文件是typescript,会去掉相应的ts描述
对ast进行遍历,首先提取propTypes和defaultProps
根据组件类型,处理函数组件和类组件
在类组件里面,需要转换生命周期,state等信息
最后根据提取到的信息拼接成vue组件,通过prettier-eslint来美化
转化前后对比
到此,相信大家对“React组件怎么转Vue组件”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网页标题:React组件怎么转Vue组件
标题路径:http://myzitong.com/article/gspjcd.html