React 组件转 Vue 组件的命令写法
基于目前React和Vue比较火,开发工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介对于react-to-vue工具,转化的是基本的react component,而不是全部的react应用。而基本react component的定义更多是基于props和state来渲染的组件,其中也可以包括发请求。 本文先介绍两个框架的组件共性和不兼容的地方,再介绍react-to-vue的使用和原理。在实际业务中,陆金所100多个的react基础业务组件,react-to-vue可以转化90%以上,变成vue组件。 盘点两个框架的组件共性1. props2. 组件自有状态
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工具安装及使用 Options: # demo rtv demo.js 原理步骤
转化前后对比如何同时写开源的react和vue组件如果你的组件想要被大家开源使用,作者这里有一个小提议,可以边写react组件,边试着转化成vue组件,如果转化有问题,试着改代码,尽可能跨框架支持,这样你写的组件肯定可以在react和vue项目中同时使用。 总结以上所述是小编给大家介绍的React 组件转 Vue 组件的命令写法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |