您好,登录后才能下订单哦!
这篇文章主要介绍了如何将React 组件转换成Vue 组件,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和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. 生命周期
虽然生命周期名不一样,但是差不多有对应的
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
原理步骤
对于输入的文件首先使用babylon来解析,生成ast
如果文件是typescript,会去掉相应的ts描述
对ast进行遍历,首先提取propTypes和defaultProps
根据组件类型,处理函数组件和类组件
在类组件里面,需要转换生命周期,state等信息
最后根据提取到的信息拼接成vue组件,通过prettier-eslint来美化
转化前后对比
如何同时写开源的react和vue组件
如果你的组件想要被大家开源使用,作者这里有一个小提议,可以边写react组件,边试着转化成vue组件,如果转化有问题,试着改代码,尽可能跨框架支持,这样你写的组件肯定可以在react和vue项目中同时使用。
到此这篇关于如何将React 组件转换成Vue 组件的文章就介绍到这了,更多相关如何将React 组件转换成Vue 组件的内容请搜索亿速云以前的文章或继续浏览下面的相关文章希望大家以后多多支持亿速云!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。